/* ── Runic card palette (tarot-specific tokens) ── */
:root {
  --rune-bg:linear-gradient(165deg,#110d26 0%,#09071a 100%);
  --rune-border:rgba(124,92,252,.32);
  --rune-inner:rgba(124,92,252,.12);
  --rune-glow:rgba(124,92,252,.18);
  --rune-text:rgba(210,200,240,.88);
  --rune-dim:rgba(167,139,250,.55);
}

/* ── Card flip ── */
@keyframes flipIn{
  0%  {opacity:0;transform:translateY(32px) scaleX(0.04) scaleY(0.85)}
  42% {opacity:1;transform:translateY(-7px) scaleX(1.05) scaleY(1.04)}
  66% {transform:translateY(4px) scaleX(0.97) scaleY(0.98)}
  100%{opacity:1;transform:translateY(0) scaleX(1) scaleY(1)}
}
@keyframes flipInCross{
  0%  {opacity:0;transform:rotate(90deg) translateY(32px) scaleX(0.04) scaleY(0.85)}
  42% {opacity:1;transform:rotate(90deg) translateY(-7px) scaleX(1.05) scaleY(1.04)}
  66% {transform:rotate(90deg) translateY(4px) scaleX(0.97) scaleY(0.98)}
  100%{opacity:1;transform:rotate(90deg) translateY(0) scaleX(1) scaleY(1)}
}
@keyframes drawnGlowCross{
  0%,100%{transform:rotate(90deg);box-shadow:0 0 0 1px rgba(124,92,252,.28),0 8px 32px rgba(0,0,0,.65),0 0 18px rgba(124,92,252,.12),0 0 40px rgba(124,92,252,.06)}
  50%    {transform:rotate(90deg);box-shadow:0 0 0 1px rgba(167,139,250,.48),0 8px 32px rgba(0,0,0,.65),0 0 32px rgba(124,92,252,.28),0 0 70px rgba(124,92,252,.14)}
}
@keyframes flipInBig{
  0%  {opacity:0;transform:translateY(40px) scaleX(0.03) scaleY(0.84)}
  40% {opacity:1;transform:translateY(-9px) scaleX(1.06) scaleY(1.05)}
  64% {transform:translateY(5px) scaleX(0.96) scaleY(0.97)}
  82% {transform:translateY(-2px) scaleX(1.01) scaleY(1.01)}
  100%{opacity:1;transform:translateY(0) scaleX(1) scaleY(1)}
}
.celtic-card.crossing{
  position:absolute;top:0;left:0;z-index:2;
  transform-origin:74px 112px;
  border-color:rgba(124,92,252,.48);
  box-shadow:0 0 0 1px rgba(124,92,252,.28),0 8px 24px rgba(0,0,0,.55),0 0 32px rgba(124,92,252,.18);
  overflow:hidden;
}
.celtic-card.drawn{animation:flipIn .65s cubic-bezier(.16,1,.3,1) both,drawnGlow 4s ease-in-out 0.75s infinite}
.celtic-card.drawn.crossing{animation:flipInCross .65s cubic-bezier(.16,1,.3,1) both,drawnGlowCross 4s ease-in-out 0.75s infinite}
@keyframes zspin{to{transform:rotate(360deg)}}

/* ── Mystic page-card glow ── */
@keyframes mystGlow{
  0%,100%{box-shadow:var(--shadow-card),0 0 22px rgba(124,92,252,.06),0 0 55px rgba(124,92,252,.03)}
  50%    {box-shadow:var(--shadow-card),0 0 38px rgba(124,92,252,.14),0 0 90px rgba(167,139,250,.08)}
}
.page{width:100%;max-width:var(--page-max);margin:0 auto;position:relative;z-index:1;animation:vcrise .45s cubic-bezier(.16,1,.3,1)}

/* ── Glass card (with glow) ── */
.card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.6rem;margin-bottom:1rem;position:relative;overflow:hidden;
  animation:mystGlow 5.5s ease-in-out infinite;
}
.card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.25),transparent);pointer-events:none}

/* ── Section label ── */
.section-label{display:flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;margin-bottom:.9rem;color:rgba(var(--sl-c,150,150,180),.85);position:relative;z-index:4}
.section-label .sl-dot{width:5px;height:5px;border-radius:50%;background:rgb(var(--sl-c,150,150,180));box-shadow:0 0 8px rgba(var(--sl-c,150,150,180),.55);flex-shrink:0}
.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--sl-c,150,150,180),.2),transparent)}
.sl-accent{--sl-c:124,92,252}.sl-violet{--sl-c:162,110,255}.sl-neutral{--sl-c:100,115,148}

/* ── Buttons ── */
/* btn base + accent/ghost inherited from shared.css */
.spread-btns{display:flex;gap:.6rem;margin-bottom:1.15rem}

/* ── Page header row ── */
.page-header-row{display:flex;align-items:center;height:68px;gap:.55rem;margin-bottom:1.1rem;position:relative}
.back-btn{flex-shrink:0;width:48px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--card-bg);border:1px solid var(--border);color:var(--text-dim);font-size:1.2rem;font-weight:700;text-decoration:none;transition:all .2s;box-shadow:var(--shadow-card);position:relative;overflow:hidden;animation:mystGlow 5.5s ease-in-out infinite}
.back-btn::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.2),transparent)}
.back-btn:hover{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent2);transform:translateX(-2px)}
.title-card{flex:1;display:flex;align-items:center;gap:.75rem;height:62px;padding:0 1.4rem;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);position:relative;overflow:hidden;animation:mystGlow 5.5s ease-in-out infinite}
.title-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.2),transparent)}
.title-card h1{font-size:1.3rem;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1.15;margin:0}
.title-card .sub{font-size:.96rem;color:var(--text-dim);margin:.1rem 0 0}
.title-text{display:flex;flex-direction:column}
/* Header search */
.hdr-search-wrapper{display:flex;align-items:center;max-width:0;opacity:0;overflow:hidden;transition:max-width .32s cubic-bezier(.16,1,.3,1),opacity .22s ease;flex:0;flex-shrink:0}
.hdr-search-wrapper.expanded{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:50;max-width:none;opacity:1;flex:none;overflow:visible;background:var(--card-bg);border:1px solid var(--border-hi);border-radius:var(--radius-sm);padding:.3rem .6rem;backdrop-filter:blur(16px);box-shadow:0 4px 24px rgba(0,0,0,.5)}
.hdr-search-row{display:flex;align-items:center;gap:.4rem;width:100%}
.hdr-search-input{flex:1;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xs);color:var(--text);font-size:1rem;padding:.45rem .8rem;outline:none;font-family:inherit;transition:border-color .15s;min-width:0}
.hdr-search-input:focus{border-color:rgba(124,92,252,.5)}
.hdr-search-input::placeholder{color:var(--text-muted)}
.hdr-search-submit,.hdr-search-close{background:none;border:none;color:var(--text-muted);font-size:.95rem;cursor:pointer;padding:.3rem;border-radius:4px;transition:color .15s;flex-shrink:0}
.hdr-search-submit:hover,.hdr-search-close:hover{color:var(--text)}
.hdr-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0f0d1f;border:1px solid rgba(124,92,252,.3);border-radius:var(--radius-sm);box-shadow:0 8px 32px rgba(0,0,0,.7);z-index:100;display:none;overflow:hidden}
.hdr-search-results.open{display:block}
.hdr-sr-group{font-size:.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);padding:.55rem .85rem .25rem}
.hdr-sr-item{display:flex;align-items:center;gap:.55rem;padding:.45rem .85rem;text-decoration:none;color:var(--text-dim);transition:background .1s;font-size:.82rem}
.hdr-sr-item:hover{background:rgba(124,92,252,.08);color:var(--text)}
.hdr-sr-divider{height:1px;background:var(--border)}
.hdr-sr-web{display:flex;align-items:center;gap:.4rem;padding:.45rem .85rem;font-size:.82rem;color:var(--accent2);text-decoration:none}
.hdr-sr-web:hover{background:rgba(124,92,252,.06)}
/* Header icon buttons */
.hdr-search-btn,.user-btn,.bell-btn{position:relative;flex-shrink:0;width:48px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--card-bg);border:1px solid var(--border);color:var(--text-dim);font-size:1rem;cursor:pointer;transition:all .18s;box-shadow:var(--shadow-card);animation:mystGlow 5.5s ease-in-out infinite}
.hdr-search-btn:hover,.user-btn:hover,.bell-btn:hover{border-color:var(--border-hi);color:var(--text)}
.bell-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;border-radius:10px;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 3px}
.bell-badge.visible{display:flex}
/* Panels */
.user-panel,.alerts-panel{position:absolute;top:calc(100% + 6px);right:0;width:240px;background:linear-gradient(145deg,#0e0e1c,#12121e);border:1px solid var(--border-hi);border-radius:var(--radius-sm);box-shadow:0 0 0 1px rgba(124,92,252,.08),0 16px 48px rgba(0,0,0,.7);z-index:400;display:none;overflow:hidden;animation:vcrise .18s cubic-bezier(.16,1,.3,1) both}
.user-panel.open,.alerts-panel.open{display:block}
.user-panel-info{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;border-bottom:1px solid var(--border)}
.user-panel-avatar{font-size:1.4rem;flex-shrink:0}
.user-panel-name{font-size:.88rem;font-weight:700;color:var(--text)}
.user-panel-role{font-size:.72rem;color:var(--text-muted)}
.user-panel-btn{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;font-size:.82rem;color:var(--text-dim);cursor:pointer;transition:background .1s;border:none;background:none;width:100%;font-family:inherit;text-decoration:none;text-align:left}
.user-panel-btn:hover{background:rgba(124,92,252,.08);color:var(--text)}
.user-panel-divider{height:1px;background:var(--border);margin:.1rem 0}
.upb-icon{font-size:.9rem;width:1.2rem;flex-shrink:0}
.alerts-panel-header{display:flex;align-items:center;padding:.65rem .85rem;border-bottom:1px solid var(--border);gap:.4rem}
.alerts-panel-title{font-size:.82rem;font-weight:700;color:var(--text);flex:1}
.alerts-dismiss-all{font-size:.72rem;color:var(--text-muted);background:none;border:none;cursor:pointer;font-family:inherit;padding:.15rem .35rem;border-radius:4px;transition:color .12s}
.alerts-dismiss-all:hover{color:var(--text)}
.alerts-close{font-size:.9rem;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:.15rem .35rem;border-radius:4px;line-height:1;transition:color .12s}
.alerts-close:hover{color:var(--text)}
.alert-item{padding:.55rem .85rem;border-bottom:1px solid var(--row-border)}
.alert-item:last-child{border-bottom:none}
.alert-item-ts{font-size:.68rem;color:var(--text-muted);margin-bottom:.18rem;font-family:'DM Mono',monospace}
.alert-item-msg{font-size:.82rem;color:var(--text-dim);line-height:1.45}
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .42rem;border-radius:20px;font-family:'DM Mono',monospace;font-size:.64rem;font-weight:500;border:1px solid;margin-right:.3rem;vertical-align:baseline}
.badge-green{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.25);color:var(--green)}
.badge-amber{background:rgba(255,195,55,.1);border-color:rgba(255,195,55,.25);color:var(--amber)}
.badge-red{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.25);color:var(--red)}
.badge-violet{background:rgba(124,92,252,.1);border-color:rgba(124,92,252,.28);color:var(--accent2)}
.alerts-footer{padding:.45rem .85rem;border-top:1px solid var(--border)}
.alerts-footer a{font-size:.76rem;color:var(--accent2);text-decoration:none}
.alerts-footer a:hover{text-decoration:underline}
.alerts-empty{padding:1.1rem .85rem;font-size:.82rem;color:var(--text-muted);text-align:center}

/* ── Spread selector ── */
.spread-bar{display:flex;gap:3px;padding:3px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:1.25rem}
.spread-btn{flex:1;padding:.32rem .5rem;border-radius:6px;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--text-muted);border:1px solid transparent;background:none;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap;text-align:center}
.spread-btn:hover{color:var(--text-dim)}
.spread-btn.active{background:rgba(124,92,252,.2);color:var(--accent2);border-color:rgba(124,92,252,.3)}

/* ════════════════════════════
   RUNIC CARD DESIGN
   ════════════════════════════ */
/* shared runic card shell */
.rune-card-shell{
  background:var(--rune-bg);
  border:1px solid var(--rune-border);
  border-radius:16px;
  box-shadow:0 0 0 1px rgba(124,92,252,.1),0 12px 48px rgba(0,0,0,.65),inset 0 1px 0 rgba(167,139,250,.1);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  cursor:pointer;transition:border-color .22s,box-shadow .22s;
}
/* inner double-border rune frame */
.rune-card-shell::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 25%,transparent 72%,rgba(0,0,0,.52) 100%);
  pointer-events:none;z-index:2;
}
/* top light bar */
.rune-card-shell::after{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.4),transparent);
  pointer-events:none;z-index:3;
}
.rune-card-shell:hover{
  border-color:rgba(167,139,250,.6);
  box-shadow:0 0 0 1px rgba(124,92,252,.22),0 16px 52px rgba(0,0,0,.7),0 0 40px rgba(124,92,252,.14),inset 0 1px 0 rgba(167,139,250,.15);
}

/* ── Three-card face ── */
.tarot-card{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:1rem .75rem .95rem;
}
.tarot-card,.tarot-card::before,.tarot-card::after{} /* inherit from rune-card-shell via JS addClass */
/* drawn animation */
.tarot-card.drawn{animation:flipIn .72s cubic-bezier(.16,1,.3,1) both,drawnGlow 4s ease-in-out 0.8s infinite}
.tarot-card.drawn.reversed{animation:flipIn .72s cubic-bezier(.16,1,.3,1) both,drawnGlow 4s ease-in-out 0.8s infinite;transform:rotate(180deg)}
.tarot-card.drawn.reversed:hover{transform:rotate(180deg) translateY(-3px)}
.tarot-card.selected{box-shadow:0 0 0 2px var(--accent),0 0 0 5px rgba(124,92,252,.18),0 12px 40px rgba(0,0,0,.65),0 0 42px rgba(124,92,252,.22);border-color:rgba(167,139,250,.8)!important}

/* card inner content */
.tc-roman{font-size:1rem;font-weight:700;letter-spacing:3px;color:#fff;font-family:'DM Mono',monospace;position:relative;z-index:4;text-shadow:0 1px 6px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.6)}
.tc-art{font-size:4.8rem;line-height:1;margin:.15rem 0;filter:drop-shadow(0 0 14px rgba(124,92,252,.45));position:relative;z-index:4}
.tc-divider{width:55%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);margin:.1rem 0;position:relative;z-index:4}
.tc-name{font-size:.92rem;font-weight:700;color:#fff;text-align:center;line-height:1.2;padding:0 4px;letter-spacing:.4px;position:relative;z-index:4;text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7)}
.tc-rx{font-size:.68rem;color:var(--amber);letter-spacing:1px;margin-top:1px;position:relative;z-index:4;text-shadow:0 1px 4px rgba(0,0,0,.8)}
/* runic corner glyphs */
.rc{position:absolute;font-size:.5rem;color:rgba(255,255,255,.35);line-height:1;pointer-events:none;font-family:'DM Mono',monospace;z-index:4}
.rc.tl{top:.5rem;left:.6rem}.rc.tr{top:.5rem;right:.6rem}
.rc.bl{bottom:.5rem;left:.6rem}.rc.br{bottom:.5rem;right:.6rem}

/* ── Card back — runic ── */
.card-back{
  border-radius:18px;border:1px solid var(--rune-border);
  background:var(--rune-bg);
  box-shadow:0 0 0 1px rgba(124,92,252,.1),0 8px 32px rgba(0,0,0,.65),inset 0 1px 0 rgba(167,139,250,.1);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .22s,transform .18s,box-shadow .22s;
  position:relative;overflow:hidden;
}
.card-back::before{content:'';position:absolute;inset:7px;border-radius:13px;border:1px solid rgba(124,92,252,.12);pointer-events:none}
.card-back::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.35),transparent);pointer-events:none}
.card-back:hover{border-color:rgba(167,139,250,.58);transform:translateY(-5px);box-shadow:0 0 0 1px rgba(124,92,252,.22),0 20px 60px rgba(0,0,0,.72),0 0 38px rgba(124,92,252,.16)}
.card-back-inner{
  width:82%;height:88%;border-radius:14px;
  border:1px solid rgba(124,92,252,.16);
  background:rgba(124,92,252,.04);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;
  position:relative;z-index:4;
}
.cb-glyph{font-size:2rem;color:rgba(167,139,250,.42);filter:drop-shadow(0 0 10px rgba(124,92,252,.5))}
.cb-hint{font-size:.6rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(167,139,250,.3)}

/* ── Drawn card mystic glow ── */
@keyframes drawnGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(124,92,252,.28),0 8px 32px rgba(0,0,0,.65),0 0 18px rgba(124,92,252,.12),0 0 40px rgba(124,92,252,.06)}
  50%    {box-shadow:0 0 0 1px rgba(167,139,250,.48),0 8px 32px rgba(0,0,0,.65),0 0 32px rgba(124,92,252,.28),0 0 70px rgba(124,92,252,.14)}
}
@keyframes bigDrawnGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(124,92,252,.22),0 24px 80px rgba(0,0,0,.75),0 0 28px rgba(124,92,252,.14),0 0 60px rgba(124,92,252,.08)}
  50%    {box-shadow:0 0 0 1px rgba(167,139,250,.42),0 24px 80px rgba(0,0,0,.75),0 0 50px rgba(124,92,252,.32),0 0 100px rgba(124,92,252,.18)}
}


.pos-label{font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-top:.55rem;text-align:center}

/* ── Meaning panel ── */
.meaning-panel{background:rgba(124,92,252,.05);border:1px solid rgba(124,92,252,.18);border-radius:var(--radius-sm);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.65rem;position:relative;overflow:hidden;margin-bottom:1rem}
.meaning-panel::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(124,92,252,.38),transparent)}
.mp-header{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap}
.mp-name{font-size:1.05rem;font-weight:700;color:var(--text)}
.mp-pos{font-size:.76rem;color:var(--text-muted)}
.mp-rx{font-size:.68rem;color:var(--amber);background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);border-radius:4px;padding:.1rem .38rem;font-family:'DM Mono',monospace}
.kw-row{display:flex;gap:5px;flex-wrap:wrap}
.kw{font-size:.68rem;padding:.18rem .55rem;border-radius:20px;background:rgba(124,92,252,.12);color:var(--accent2);border:1px solid rgba(124,92,252,.25);font-family:'DM Mono',monospace}
.mp-body{font-size:.84rem;color:var(--text-dim);line-height:1.65}
.meaning-cols{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.85rem}
.mcol{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:var(--radius-xs);padding:.85rem .95rem}
.mcol-lbl{font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:.48rem}
.mcol-lbl.up{color:var(--accent2)}.mcol-lbl.rx{color:var(--amber)}
.mcol-body{font-size:.83rem;color:var(--text-dim);line-height:1.62}
.theme-row{display:flex;gap:5px;flex-wrap:wrap}
.theme-tag{font-size:.72rem;padding:.22rem .65rem;border-radius:20px;border:1px solid var(--border);color:var(--text-dim);background:rgba(255,255,255,.03)}
.summary-panel{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.1rem;margin-bottom:1rem}
.summary-lbl{font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:.55rem}
.summary-body{font-size:.84rem;color:var(--text-dim);line-height:1.65}

/* ── Daily large card ── */
.daily-center{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:.5rem 0 1.15rem}
.big-tarot-card{
  width:192px;height:308px;padding:1rem .75rem .95rem;
  background:var(--rune-bg);border:1px solid rgba(124,92,252,.35);border-radius:18px;
  box-shadow:0 0 0 1px rgba(124,92,252,.14),0 24px 80px rgba(0,0,0,.75),inset 0 1px 0 rgba(167,139,250,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;
  animation:flipInBig .85s cubic-bezier(.16,1,.3,1) both,bigDrawnGlow 4.5s ease-in-out 1s infinite;
}
/* Suppress flip when card arrives from overlay (already seen) */
.big-tarot-card.no-flip{animation:bigDrawnGlow 4.5s ease-in-out 0s infinite!important}
.big-tarot-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 22%,transparent 72%,rgba(0,0,0,.55) 100%);pointer-events:none;z-index:2}
.big-tarot-card::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.4),transparent);pointer-events:none;z-index:3}
.big-tarot-card.reversed{animation:flipInBig .85s cubic-bezier(.16,1,.3,1) both,bigDrawnGlow 4.5s ease-in-out 1s infinite;transform:rotate(180deg)}
.big-tarot-card.no-flip.reversed{animation:bigDrawnGlow 4.5s ease-in-out 0s infinite!important;transform:rotate(180deg)}
.btc-roman{font-size:1.1rem;font-weight:700;letter-spacing:3px;color:#fff;font-family:'DM Mono',monospace;position:relative;z-index:4;text-shadow:0 1px 6px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.6)}
.btc-art{font-size:5.2rem;line-height:1;margin:.3rem 0;filter:drop-shadow(0 0 18px rgba(124,92,252,.5));position:relative;z-index:4}
.btc-divider{width:55%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);margin:.1rem 0;position:relative;z-index:4}

/* ── Card artwork image (replaces emoji when PNG is present) ── */
/* formula: inset + border-radius = card outer-radius → zero corner gap        */
.card-art-img{
  position:absolute !important;
  inset:5px;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  object-fit:cover;
  object-position:top;
  border-radius:13px;
  overflow:hidden;
  z-index:1;
  filter:none;
  pointer-events:none;
  margin:0 !important;
}
/* Three-card — rune-card-shell outer 16px: 5 + 11 = 16 (matches celtic exactly) */
.tc-art.card-art-img{
  border-radius:11px;
}
/* Overlay card — outer 24px: 5 + 19 = 24 */
.overlay-art.card-art-img{
  position:absolute !important;
  inset:5px;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  object-position:top;
  border-radius:19px;
  overflow:hidden;
  margin:0 !important;
}
/* Celtic cross — outer 16px: 5 + 11 = 16 */
.cc-art.card-art-img{
  position:absolute !important;
  inset:5px;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  object-position:top;
  border-radius:11px;
  overflow:hidden;
  margin:0 !important;
}
.btc-name{font-size:1.05rem;font-weight:700;color:#fff;text-align:center;line-height:1.2;letter-spacing:.4px;position:relative;z-index:4;text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7)}
.big-card-back{
  width:192px;height:308px;border-radius:18px;
  background:var(--rune-bg);
  border:1px solid var(--rune-border);
  box-shadow:0 0 0 1px rgba(124,92,252,.1),0 12px 48px rgba(0,0,0,.65),inset 0 1px 0 rgba(167,139,250,.1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;overflow:hidden;
  transition:border-color .22s,transform .18s,box-shadow .22s;
}
.big-card-back::before{content:'';position:absolute;inset:7px;border-radius:13px;border:1px solid rgba(124,92,252,.12);pointer-events:none}
.big-card-back::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.35),transparent);pointer-events:none}
.big-card-back:hover{border-color:rgba(167,139,250,.58);transform:translateY(-5px);box-shadow:0 0 0 1px rgba(124,92,252,.22),0 20px 60px rgba(0,0,0,.72),0 0 38px rgba(124,92,252,.16)}
.big-card-back-inner{width:82%;height:88%;border-radius:14px;border:1px solid rgba(124,92,252,.16);background:rgba(124,92,252,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;position:relative;z-index:4}

/* ── Three-card ── */
.three-cards-row{display:flex;gap:1.75rem;justify-content:center;margin-bottom:1.25rem;flex-wrap:wrap}

/* ── Celtic cross ── */
.celtic-wrap{display:flex;gap:2.5rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.15rem;justify-content:center}
.cross-grid{display:grid;grid-template-columns:148px 148px 148px;grid-template-rows:auto auto auto;gap:12px;overflow:visible}
.cc-center-wrap{position:relative;width:148px;height:224px;overflow:visible;z-index:10;isolation:isolate}
.celtic-card{
  width:148px;height:224px;padding:.85rem .65rem .8rem;border-radius:16px;
  background:var(--rune-bg);border:1px solid rgba(124,92,252,.28);
  box-shadow:0 0 0 1px rgba(124,92,252,.09),0 8px 32px rgba(0,0,0,.6),inset 0 1px 0 rgba(167,139,250,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.celtic-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,rgba(0,0,0,.42) 0%,transparent 24%,transparent 72%,rgba(0,0,0,.50) 100%);pointer-events:none;z-index:2}
.celtic-card::after{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.3),transparent);pointer-events:none;z-index:3}
.celtic-card:hover{border-color:rgba(167,139,250,.5);box-shadow:0 0 0 1px rgba(124,92,252,.18),0 12px 40px rgba(0,0,0,.7),0 0 28px rgba(124,92,252,.12)}
.celtic-card.selected{box-shadow:0 0 0 2px var(--accent),0 0 0 5px rgba(124,92,252,.18),0 12px 40px rgba(0,0,0,.65),0 0 42px rgba(124,92,252,.22);border-color:rgba(167,139,250,.8)!important}
.cc-roman{font-size:.84rem;font-weight:700;letter-spacing:2px;color:#fff;font-family:'DM Mono',monospace;position:relative;z-index:4;text-shadow:0 1px 5px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.7)}
.cc-art{font-size:2.8rem;line-height:1;filter:drop-shadow(0 0 10px rgba(124,92,252,.38));position:relative;z-index:4}
.cc-divider{width:55%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);margin:.1rem 0;position:relative;z-index:4}
.cc-name{font-size:.78rem;font-weight:700;color:#fff;text-align:center;line-height:1.2;padding:0 3px;letter-spacing:.3px;position:relative;z-index:4;text-shadow:0 1px 5px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.7)}
.cc-rx{font-size:.66rem;color:var(--amber);letter-spacing:1px;position:relative;z-index:4;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.staff-area{display:flex;flex-direction:column;gap:12px}
.staff-lbl{font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);text-align:center;margin-bottom:3px}
.cross-labels{display:grid;grid-template-columns:148px 148px 148px;gap:12px;margin-top:7px}
.cross-lbl{font-size:.7rem;color:var(--text-dim);text-align:center;font-family:'DM Mono',monospace}

/* ── Position tabs ── */
.pos-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:1rem}
.pos-tab{padding:.28rem .65rem;border-radius:6px;font-size:.76rem;font-weight:600;cursor:pointer;color:var(--text-muted);border:1px solid transparent;background:none;font-family:'DM Sans',sans-serif;transition:all .15s}
.pos-tab:hover{color:var(--text-dim)}
.pos-tab.active{background:rgba(124,92,252,.18);color:var(--accent2);border-color:rgba(124,92,252,.3)}

/* ── Ribbon ── */
.reading-ribbon{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:1.1rem;box-shadow:var(--shadow-card)}
.ribbon-cell{padding:.7rem .5rem;text-align:center;background:var(--card-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem}
.ribbon-val{font-size:1rem;font-weight:700;color:var(--accent2);line-height:1}
.ribbon-lbl{font-size:.72rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim)}

/* ── Toast ── */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:.4rem;max-width:320px}
.toast-item{padding:.65rem 1.1rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;background:rgba(14,14,28,.95);border:1px solid var(--border-hi);color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.5);animation:vcrise .25s cubic-bezier(.16,1,.3,1)}

/* ── Daily overlay ── */
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes overlayOut{from{opacity:1}to{opacity:0}}
@keyframes cardExpand{
  0%  {transform:scale(.34) translateY(32px);opacity:0}
  60% {transform:scale(1.03) translateY(-5px);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes cardFadeOut{
  0%  {opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.82) translateY(18px)}
}
@keyframes overlayFlip{
  0%  {opacity:0;transform:scaleX(0.03) scaleY(0.85) translateY(24px)}
  44% {opacity:1;transform:scaleX(1.06) scaleY(1.05) translateY(-6px)}
  68% {transform:scaleX(0.97) scaleY(0.98) translateY(3px)}
  100%{opacity:1;transform:scaleX(1) scaleY(1) translateY(0)}
}
@keyframes overlayFlipRx{
  0%  {opacity:0;transform:rotate(180deg) scaleX(0.03) scaleY(0.85) translateY(24px)}
  44% {opacity:1;transform:rotate(180deg) scaleX(1.06) scaleY(1.05) translateY(-6px)}
  68% {transform:rotate(180deg) scaleX(0.97) scaleY(0.98) translateY(3px)}
  100%{opacity:1;transform:rotate(180deg) scaleX(1) scaleY(1) translateY(0)}
}
#daily-overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(2,1,8,.94);backdrop-filter:blur(16px);
  align-items:center;justify-content:center;
}
#daily-overlay.visible{display:flex;animation:overlayIn .28s ease both}
#daily-overlay.fading{animation:overlayOut .3s ease both}
#overlay-card-wrap{
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  animation:cardExpand .5s cubic-bezier(.16,1,.3,1) both;
}
#overlay-card-wrap.shrinking{animation:cardFadeOut .38s cubic-bezier(.4,0,1,1) both}
/* Overlay card — large runic style */
#overlay-card-inner{
  width:300px;height:480px;border-radius:24px;
  background:var(--rune-bg);
  border:1px solid rgba(124,92,252,.55);
  box-shadow:
    0 0 0 1px rgba(124,92,252,.2),
    0 0 70px rgba(124,92,252,.4),
    0 0 140px rgba(124,92,252,.2),
    0 50px 120px rgba(0,0,0,.94),
    inset 0 1px 0 rgba(167,139,250,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
/* Runic inner frame */
#overlay-card-inner::before{content:'';position:absolute;inset:9px;border-radius:18px;border:1px solid rgba(124,92,252,.12);pointer-events:none;z-index:4}
#overlay-card-inner.flipping::before,#overlay-card-inner.flipping.rx::before{inset:0;border-radius:inherit;border:none;background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 22%,transparent 72%,rgba(0,0,0,.55) 100%);z-index:2}
/* Top shimmer */
#overlay-card-inner::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.6),transparent);pointer-events:none;z-index:3}
#overlay-card-inner:hover{border-color:rgba(167,139,250,.75);box-shadow:0 0 0 1px rgba(124,92,252,.32),0 0 90px rgba(124,92,252,.52),0 0 170px rgba(124,92,252,.26),0 50px 120px rgba(0,0,0,.94),inset 0 1px 0 rgba(167,139,250,.25)}
#overlay-card-inner.flipping{animation:overlayFlip .8s cubic-bezier(.16,1,.3,1) both;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.4rem 1.1rem 1.3rem;overflow:hidden}
#overlay-card-inner.flipping.rx{animation:overlayFlipRx .8s cubic-bezier(.16,1,.3,1) both;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.4rem 1.1rem 1.3rem;overflow:hidden}
.overlay-roman{font-size:1.3rem;font-weight:700;letter-spacing:3px;color:#fff;font-family:'DM Mono',monospace;position:relative;z-index:4;text-shadow:0 1px 8px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.7)}
.overlay-art{font-size:7.5rem;line-height:1;filter:drop-shadow(0 0 28px rgba(124,92,252,.65));position:relative;z-index:4}
.overlay-divider{width:55%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);position:relative;z-index:4}
.overlay-name{font-size:1.22rem;font-weight:700;color:#fff;text-align:center;line-height:1.2;letter-spacing:.5px;position:relative;z-index:4;text-shadow:0 1px 8px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.7)}
#overlay-hint{font-size:.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75);position:relative;z-index:4;text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* ── Spread sections ── */
.spread-section{display:none}
.spread-section.active{display:block;animation:spreadIn .38s cubic-bezier(.16,1,.3,1) both}
@keyframes spreadIn{
  0%  {opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}
/* Celtic deal stagger — applied via JS inline animation-delay */
@keyframes cardDeal{
  0%  {opacity:0;transform:translateY(22px) scale(.94)}
  60% {transform:translateY(-4px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes cardDealFade{
  0%  {opacity:0;transform:rotate(90deg) scale(.94)}
  60% {opacity:1;transform:rotate(90deg) scale(1.02)}
  100%{opacity:1;transform:rotate(90deg) scale(1)}
}
/* Ghost card back — no hover interaction */
.card-back.ghost{pointer-events:none;cursor:default}
.card-back.ghost:hover{transform:none;border-color:var(--rune-border);box-shadow:0 0 0 1px rgba(124,92,252,.1),0 8px 32px rgba(0,0,0,.65),inset 0 1px 0 rgba(167,139,250,.1)}

@media(max-width:640px){
  .celtic-wrap{justify-content:center}
  .meaning-cols{grid-template-columns:1fr}
  .three-cards-row{gap:.8rem}
}
/* ── History panel ── */
.history-tab.active{background:rgba(124,92,252,.18);border-color:rgba(124,92,252,.45);color:var(--accent2)}
.th-empty{font-size:.82rem;color:var(--text-dim);padding:.75rem 0;text-align:center}
.th-entry{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;margin-bottom:.55rem;transition:opacity .2s}
.th-entry-header{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.th-spread-icon{font-size:1.1rem;flex-shrink:0}
.th-spread-label{font-size:.82rem;font-weight:700;color:var(--text);flex:1}
.th-ts{font-size:.72rem;color:var(--text-dim);white-space:nowrap}
.th-delete-btn{background:none;border:none;color:var(--text-dim);font-size:.78rem;cursor:pointer;padding:.1rem .35rem;border-radius:4px;line-height:1;transition:color .15s,background .15s;flex-shrink:0}
.th-delete-btn:hover{color:var(--red,#f87171);background:rgba(248,113,113,.12)}
.th-cards-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.45rem}
.th-card-chip{font-size:.73rem;background:rgba(124,92,252,.1);border:1px solid rgba(124,92,252,.22);color:var(--text-dim);padding:.15rem .45rem;border-radius:4px;white-space:nowrap}
.th-card-chip.rx{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.2);color:var(--red,#f87171)}
.th-rx-badge{font-size:.65rem;font-weight:700;opacity:.85}
.th-summary{font-size:.78rem;color:var(--text-dim);line-height:1.5;font-style:italic;padding-top:.35rem;border-top:1px solid var(--border)}