/* ============ TAROT MODULE (shared across /Tarot/*.aspx) ============ */
/* Kept out of site.css since it's only loaded on the handful of Tarot pages. */

.tarot-flow-section{
  position:relative;overflow:hidden;padding:56px 0 80px;color:#fff;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.25) 0, transparent 60%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,.25) 0, transparent 60%),
    radial-gradient(60% 55% at 50% 0%, rgba(255,193,7,.09), transparent 70%),
    linear-gradient(180deg, #1a0d00, var(--night) 55%, #2a1400);
}
.tarot-flow-section .wrap{position:relative;z-index:1;max-width:920px;text-align:center;}
/* A soft dark shadow behind hero text keeps it legible over the gold glow above,
   regardless of exactly where the glow falls for a given page's content height. */
.tarot-kicker, .tarot-flow-section h1, .tarot-flow-section h2, .tarot-flow-section .lead,
.tarot-crumbs, .tarot-nav, .tarot-today-date{
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.tarot-kicker{
  display:inline-block;font-size:11.5px;letter-spacing:1.6px;font-weight:800;color:var(--gold);
  text-transform:uppercase;margin-bottom:14px;
}
.tarot-flow-section h1, .tarot-flow-section h2{color:#fff;}
.tarot-flow-section .lead{color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 28px;}
.tarot-crumbs{font-size:12.5px;color:rgba(255,255,255,.7);margin-bottom:26px;}
.tarot-crumbs a{color:rgba(255,255,255,.9);}

/* ---- Shared cross-page nav (always available, every Tarot page) ---- */
.tarot-nav{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 4px;
  margin-bottom:22px;font-size:12.5px;
}
.tarot-nav a{
  color:rgba(255,255,255,.78);padding:6px 12px;border-radius:999px;transition:color .15s,background .15s;white-space:nowrap;
}
.tarot-nav a:hover{color:#fff;background:rgba(255,255,255,.1);}
.tarot-nav a.active{color:#2a1400;background:var(--gold);font-weight:800;}
.tarot-nav-home{font-weight:800;color:var(--gold) !important;background:none !important;}
.tarot-nav-home:hover{color:#fff !important;}
.tarot-nav-sep{color:rgba(255,255,255,.4);}

.tarot-step{display:none;}
.tarot-step.active{display:block;animation:tarotFadeIn .5s ease;}
@keyframes tarotFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---- Step: question input ---- */
.tarot-question-box{
  position:relative;max-width:640px;margin:0 auto 8px;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,193,7,.35);border-radius:999px;
}
.tarot-question-box input{
  width:100%;background:none;border:none;outline:none;color:#fff;font-family:'Cormorant Garamond',serif;
  font-size:20px;padding:18px 26px;text-align:center;
}
.tarot-question-box input::placeholder{color:rgba(255,255,255,.5);}
.tarot-question-count{font-size:11.5px;color:rgba(255,255,255,.6);margin-bottom:22px;}
.tarot-input-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:640px;margin:0 auto 8px;}
.tarot-input-row .tarot-question-box{flex:1;min-width:220px;margin-bottom:0;}
.tarot-input-row input[type="date"]{color-scheme:dark;}
.tarot-today-date{font-family:'Cormorant Garamond',serif;font-size:26px;color:#fff;margin:-6px 0 18px;}
.tarot-form-error{color:#ffcabe;font-size:12.5px;margin:-6px 0 16px;display:none;}
.tarot-form-error.show{display:block;}

.tarot-cta{
  display:inline-block;min-width:220px;padding:14px 30px;border-radius:999px;
  background:transparent;border:1.5px solid var(--gold);color:#fff;font-weight:800;letter-spacing:.6px;
  font-size:13px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s;
}
.tarot-cta:hover{background:var(--gold);color:#2a1400;}
.tarot-cta:disabled{opacity:.4;cursor:not-allowed;}
.tarot-cta:disabled:hover{background:transparent;color:#fff;}

/* ---- Step: pick from the fan ---- */
.tarot-pick-header{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:8px;}
.tarot-choose-line{font-family:'Cormorant Garamond',serif;font-size:30px;text-shadow:0 2px 10px rgba(0,0,0,.55);}
.tarot-count-badge{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border:1px solid var(--gold);border-radius:50%;margin:0 6px;vertical-align:middle;font-size:26px;
}
.tarot-shuffle-btn{
  padding:9px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.3);
  color:#fff;font-size:11.5px;letter-spacing:1px;font-weight:800;text-transform:uppercase;cursor:pointer;
}
.tarot-shuffle-btn:hover{border-color:var(--gold);color:var(--gold);}
.tarot-pick-sub{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:6px;text-shadow:0 2px 10px rgba(0,0,0,.55);}

/* Semicircle fan: tarot-interactive.js sets --a (angle) and --r (radius) on each card and the
   fan height; every card pivots around the bottom-centre of the fan. */
.tarot-fan{
  position:relative;height:300px;margin:32px auto 0;width:100%;
}
.tarot-fan::before{
  content:'';position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:60%;height:100%;background:radial-gradient(ellipse at center, rgba(255,193,7,.16), transparent 68%);
  pointer-events:none;
}
.tarot-fan-card{
  position:absolute;left:50%;bottom:0;width:104px;height:150px;margin-left:-52px;
  border-radius:10px;border:1.5px solid rgba(255,193,7,.55);cursor:pointer;transform-origin:50% 100%;
  --a:0deg;--r:0px;transform:rotate(var(--a)) translateY(calc(-1 * var(--r)));
  background:
    radial-gradient(circle at 50% 46%, rgba(255,193,7,.16) 0%, transparent 42%),
    linear-gradient(155deg,#3a1a00,var(--night) 55%,#1a0d00);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.7);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s, box-shadow .2s;
}
.tarot-fan-card::before{
  content:'';position:absolute;inset:7px;border:1px solid rgba(255,193,7,.3);border-radius:6px;
}
.tarot-fan-card::after{
  content:'';position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;border:1px solid rgba(255,213,120,.65);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,213,120,.35) 0%, transparent 65%);
}
.tarot-fan-card:hover:not(.picked){box-shadow:0 4px 26px -4px rgba(255,193,7,.65);transform:rotate(var(--a)) translateY(calc(-1 * var(--r) - 18px));}
.tarot-fan-card:hover:not(.picked)::after{border-color:var(--gold);}
/* the chosen card fades out of the arc while its copy (.tarot-fly-card) flies into the tray */
.tarot-fan-card.picked{opacity:0;transition:opacity .15s;pointer-events:none;}

/* ---- Picked-cards tray (top right of the pick step) ---- */
.tarot-step{position:relative;}
.tarot-picked-tray{position:absolute;top:0;right:0;display:flex;gap:10px;z-index:5;}
.tarot-picked-slot{position:relative;width:62px;height:90px;border-radius:8px;border:1.5px dashed rgba(255,193,7,.45);
  background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;}
.tarot-picked-slot > span{font-size:13px;font-weight:800;color:rgba(255,213,120,.7);}
.tarot-fly-card,.tarot-picked-slot.filled{
  border:1.5px solid rgba(255,193,7,.75);
  background:
    radial-gradient(circle at 50% 46%, rgba(255,193,7,.2) 0%, transparent 42%),
    linear-gradient(155deg,#3a1a00,var(--night) 55%,#1a0d00);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.7);
}
.tarot-picked-slot.filled{border-style:solid;animation:tarotSlotLand .35s ease;}
.tarot-picked-slot.filled::before{content:'';position:absolute;inset:5px;border:1px solid rgba(255,193,7,.3);border-radius:5px;}
.tarot-picked-slot.filled > span{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:#2a1400;font-size:11.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.tarot-picked-slot.filled::after{content:'';position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  border:1px solid rgba(255,213,120,.65);background:radial-gradient(circle, rgba(255,213,120,.35) 0%, transparent 65%);}
@keyframes tarotSlotLand{0%{transform:scale(1.12);box-shadow:0 0 26px rgba(255,193,7,.8);}100%{transform:scale(1);}}
.tarot-fly-card{position:fixed;z-index:1000;border-radius:10px;pointer-events:none;will-change:transform;}
.tarot-fly-card::after{content:'';position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1px solid rgba(255,213,120,.65);background:radial-gradient(circle, rgba(255,213,120,.35) 0%, transparent 65%);}
@media (max-width:900px){
  .tarot-picked-tray{position:static;justify-content:center;margin:0 0 14px;}
  .tarot-picked-slot{width:46px;height:66px;}
}
/* shuffle: the fan gathers to the centre and spreads back out */
.tarot-fan.shuffling .tarot-fan-card{animation:tarotShuffleGather .5s ease;}
@keyframes tarotShuffleGather{
  0%,100%{transform:rotate(var(--a)) translateY(calc(-1 * var(--r)));}
  50%{transform:rotate(0deg) translateY(calc(-1 * var(--r) - 12px));}
}

/* ---- Step: spread / flip / reveal ---- */
.tarot-spread-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;margin-top:30px;text-align:left;
}
.tarot-slot{display:flex;flex-direction:column;align-items:center;text-align:center;}
.tarot-slot-label{
  font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px;min-height:32px;display:flex;align-items:center;justify-content:center;
}
/* card size follows the Rider-Waite-Smith artwork ratio (about 1 : 1.73) plus room for the name */
.tarot-card-flip{position:relative;width:180px;height:338px;perspective:1100px;cursor:pointer;margin-bottom:14px;}
.tarot-card-face{
  position:absolute;inset:0;border-radius:11px;backface-visibility:hidden;
  transition:transform .7s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:10px;
}
.tarot-card-back{
  border:1.5px solid var(--gold);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(150deg,var(--primary),var(--night));
  background-size:12px 12px, 12px 12px, auto;
  transform:rotateY(0deg);
}
.tarot-card-back::after{content:'\273A';color:var(--gold);font-size:26px;}
.tarot-card-front{
  background:#fff;border:2px solid var(--gold);transform:rotateY(-180deg);color:var(--ink);
}
.tarot-card-flip.flipped .tarot-card-back{transform:rotateY(180deg);}
.tarot-card-flip.flipped .tarot-card-front{transform:rotateY(0deg);}
.tarot-card-flip:not(.flipped):hover .tarot-card-back{box-shadow:0 6px 24px -6px rgba(255,193,7,.6);}
.tarot-face-glyph{font-size:32px;margin-bottom:8px;}
.tarot-face-name{font-size:12.5px;font-weight:800;text-align:center;line-height:1.3;}
/* revealed card artwork */
.tarot-card-front:has(.tarot-face-img){padding:6px 6px 0;justify-content:flex-start;background:#fbf6ea;}
.tarot-face-img{display:block;width:100%;height:auto;border-radius:7px;box-shadow:0 2px 8px rgba(0,0,0,.18);}
.tarot-face-img.reversed{transform:rotate(180deg);}
.tarot-face-caption{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:700;line-height:1.15;color:#3a1a00;padding:4px 4px;}
.tarot-card-flip.flipped{box-shadow:0 18px 40px -18px rgba(0,0,0,.8);border-radius:11px;}
.tarot-flip-prompt{font-size:11px;color:rgba(255,255,255,.6);margin-top:-6px;margin-bottom:14px;}

.tarot-reveal-text{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.82);text-align:left;max-width:230px;min-height:1.65em;}
.reveal-typed{white-space:pre-wrap;}
.reveal-cursor{display:inline-block;width:2px;height:1em;background:var(--gold);vertical-align:text-bottom;margin-left:1px;animation:tarotCursorBlink .8s step-end infinite;}
.reveal-cursor.done{display:none;}
@keyframes tarotCursorBlink{0%,100%{opacity:1;}50%{opacity:0;}}

.tarot-reading-outro{display:none;margin-top:46px;padding-top:30px;border-top:1px solid rgba(255,255,255,.15);}
.tarot-reading-outro.show{display:block;animation:tarotFadeIn .5s ease;}
.tarot-reading-outro p{color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 18px;font-size:13.8px;}
.tarot-outro-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.tarot-outro-ctas .btn{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;}
.tarot-outro-ctas .btn:hover{border-color:var(--gold);color:var(--gold);}

/* ---- Yes/No specific ---- */
.tarot-yesno-row{display:flex;gap:34px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:34px;}
.tarot-yesno-row .tarot-card-flip{width:200px;height:374px;}
.tarot-verdict{font-family:'Cormorant Garamond',serif;font-size:52px;color:var(--gold);margin:8px 0 2px;}
.tarot-yesno-result{display:none;margin-top:8px;}
.tarot-yesno-result.active{display:block;animation:tarotFadeIn .5s ease;}
.tarot-yesno-result .tarot-reveal-text{max-width:520px;margin:0 auto;text-align:center;}
.tarot-yesno-result .tarot-face-block{display:flex;flex-direction:column;align-items:center;margin-bottom:18px;}

/* ---- Hub tiles (Tarot/Default.aspx) ---- */
.tarot-hub-hero{
  text-align:center;padding:14px 0 6px;
}
.tarot-hub-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin-top:36px;
}
.tarot-hub-tile{
  display:block;border-radius:var(--radius-m);padding:28px 18px 24px;text-align:center;color:#fff;
  border:1px solid rgba(255,193,7,.3);
  background:linear-gradient(165deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.tarot-hub-tile:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 30px -14px rgba(255,193,7,.4);}
.tarot-hub-glyph{font-size:34px;margin-bottom:14px;display:block;}
.tarot-hub-tile-name{font-family:'Cormorant Garamond',serif;font-size:21px;color:#fff;}
.tarot-hub-tile-desc{font-size:12px;color:rgba(255,255,255,.72);margin-top:6px;line-height:1.5;}

@media (max-width:600px){
  .tarot-fan-card{width:56px;height:82px;margin-left:-28px;}
  .tarot-card-flip{width:140px;height:268px;}
  .tarot-yesno-row .tarot-card-flip{width:150px;height:286px;}
  .tarot-face-caption{font-size:13px;}
  .tarot-spread-grid{gap:16px;}
  .tarot-spread-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---- Card Meanings page ---- */
.tarot-search-box{max-width:640px;margin:0 auto 22px;position:relative;}
.tarot-search-box input{
  width:100%;padding:14px 20px 14px 42px;border-radius:999px;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,193,7,.3);color:#fff;font-size:14px;outline:none;
}
.tarot-search-box input::placeholder{color:rgba(255,255,255,.55);}
.tarot-search-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);opacity:.5;font-size:14px;}
.tarot-filter-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:8px;}
.tarot-filter-tab{
  padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.85);font-size:12.5px;font-weight:700;cursor:pointer;
}
.tarot-filter-tab.active{background:var(--gold);border-color:var(--gold);color:#2a1400;}
.tarot-filter-tab:disabled{opacity:.32;cursor:not-allowed;}
.tarot-meaning-count{font-size:12px;color:rgba(255,255,255,.68);text-align:right;margin:0 0 20px;}

.tarot-meaning-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin-bottom:8px;text-align:left;}
.tarot-meaning-tile{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,193,7,.22);border-radius:var(--radius-m);
  padding:16px 16px 18px;cursor:pointer;transition:border-color .18s, transform .18s;
}
.tarot-meaning-tile:hover, .tarot-meaning-tile.active{border-color:var(--gold);transform:translateY(-3px);}
.tarot-meaning-tile-num{font-size:11px;color:rgba(255,255,255,.55);font-weight:700;}
.tarot-meaning-tile-face{
  height:104px;border-radius:9px;margin:10px 0 14px;display:flex;align-items:center;justify-content:center;font-size:34px;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(150deg,var(--primary),var(--night));
  background-size:12px 12px, 12px 12px, auto;border:1px solid rgba(255,193,7,.3);
}
/* card artwork in the tiles / detail head (Rider-Waite-Smith images) */
.tarot-meaning-tile-face:has(img){height:auto;background:none;border:0;padding:0;margin:10px 0 12px;}
.tarot-meaning-tile-face img{display:block;width:100%;height:auto;border-radius:9px;box-shadow:0 10px 24px -12px rgba(0,0,0,.8);
  transition:transform .25s ease, box-shadow .25s ease;}
.tarot-meaning-tile:hover .tarot-meaning-tile-face img{transform:scale(1.02);box-shadow:0 16px 30px -12px rgba(255,193,7,.35);}
.tarot-detail-face:has(img){width:240px;height:auto;background:none;border:0;}
.tarot-detail-face img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 18px 40px -16px rgba(0,0,0,.85);}
@media (max-width:600px){.tarot-meaning-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.tarot-meaning-tile{padding:10px 10px 12px;}.tarot-detail-face:has(img){width:180px;}}
.tarot-meaning-tile-name{font-family:'Cormorant Garamond',serif;font-size:18px;color:#fff;margin-bottom:8px;}
.tarot-meaning-tags{display:flex;gap:6px;flex-wrap:wrap;}
.tarot-meaning-tag{font-size:10px;padding:3px 9px;border-radius:999px;background:rgba(255,193,7,.15);color:var(--gold);}
.tarot-meaning-empty{text-align:center;color:rgba(255,255,255,.68);padding:30px 0;display:none;}
.tarot-meaning-empty.show{display:block;}

.tarot-detail-panel{display:none;margin-top:46px;padding-top:36px;border-top:1px solid rgba(255,255,255,.15);text-align:left;}
.tarot-detail-panel.show{display:block;animation:tarotFadeIn .5s ease;}
.tarot-detail-head{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;margin-bottom:26px;}
.tarot-detail-face{
  width:130px;height:184px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:44px;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(150deg,var(--primary),var(--night));
  background-size:12px 12px, 12px 12px, auto;border:1.5px solid var(--gold);
}
.tarot-detail-kicker{font-size:11.5px;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;font-weight:800;margin-bottom:6px;}
.tarot-detail-name{font-family:'Cormorant Garamond',serif;font-size:32px;color:#fff;margin-bottom:10px;}

.tarot-orient-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:26px;}
.tarot-orient-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-m);padding:18px 20px;}
.tarot-orient-card h4{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--gold);margin:0 0 10px;}
.tarot-orient-card p{font-size:13.5px;color:rgba(255,255,255,.8);line-height:1.55;margin:0;}

.tarot-area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:26px;}
.tarot-area-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 18px;}
.tarot-area-card h5{font-size:11.5px;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 8px;}
.tarot-area-card .u,.tarot-area-card .r{font-size:12.5px;line-height:1.5;margin:0 0 6px;}
.tarot-area-card .u{color:rgba(255,255,255,.85);}
.tarot-area-card .r{color:rgba(255,255,255,.7);}

.tarot-info-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:rgba(255,255,255,.1);border-radius:12px;overflow:hidden;}
.tarot-info-cell{background:rgba(0,0,0,.35);padding:14px 16px;}
.tarot-info-cell-label{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.6);margin-bottom:4px;}
.tarot-info-cell-value{font-size:13.5px;color:#fff;font-weight:700;}

/* ---- Tarot menu bar (TarotNav.ascx): every reading type clearly visible ---- */
.tarot-menu{display:flex;justify-content:center;flex-wrap:nowrap;gap:6px;margin:0 auto 26px;padding:7px;max-width:100%;width:max-content;
  border-radius:999px;background:rgba(20,8,0,.45);border:1px solid rgba(255,200,110,.45);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.04);backdrop-filter:blur(6px);
  overflow-x:auto;scrollbar-width:none;text-shadow:none;}
.tarot-menu::-webkit-scrollbar{display:none;}
.tarot-menu a{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 15px;border-radius:999px;font-size:14px;font-weight:700;
  color:#FFE9C4;background:transparent;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s;}
.tarot-menu a:hover{background:rgba(255,200,110,.16);color:#fff;}
.tarot-menu .tm-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800;
  color:#2a1400;background:linear-gradient(135deg,#FFE29A,#E9B44C);}
.tarot-menu a.active{background:linear-gradient(135deg,#FFD978,#E9A93A);color:#2a1400;box-shadow:0 6px 16px -6px rgba(255,190,80,.8);}
.tarot-menu a.active .tm-ico{background:#2a1400;color:#FFD978;}
.tarot-menu a.tm-home:not(.active){color:#FFC86E;}
@media (max-width:900px){.tarot-menu{justify-content:flex-start;width:auto;border-radius:16px;}.tarot-menu a{padding:8px 12px;font-size:13px;}}
/* never clip: wrap the menu onto two rows when the column is narrow */
.tarot-menu{flex-wrap:wrap;width:auto;max-width:980px;overflow:visible;border-radius:24px;gap:4px;padding:6px;}
.tarot-menu a{padding:8px 13px;font-size:13.5px;}
@media (max-width:900px){.tarot-menu{justify-content:center;border-radius:18px;}.tarot-menu a{padding:7px 11px;font-size:13px;}}

/* ============ TAROT HUB: "Midnight & Gold" theme (Tarot/Default.aspx only, section.tarot-night) ============
   Continues the banner's violet night sky instead of the old brown, with gilded tarot-card tiles.
   To revert: remove the "tarot-night" class from the section in Tarot/Default.aspx. */
.tarot-flow-section.tarot-night{
  --tn-ink:#F6EFFF; --tn-soft:rgba(232,222,255,.74); --tn-gold:#F2C46B; --tn-gold-2:#D99A3B; --tn-violet:#8B5CF6;
  background:
    radial-gradient(1.2px 1.2px at 8% 12%, rgba(255,255,255,.75) 0, transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1.4px 1.4px at 37% 9%, rgba(255,236,190,.8) 0, transparent 60%),
    radial-gradient(1px 1px at 51% 46%, rgba(255,255,255,.45) 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 18%, rgba(255,255,255,.7) 0, transparent 60%),
    radial-gradient(1px 1px at 79% 61%, rgba(255,255,255,.45) 0, transparent 60%),
    radial-gradient(1.4px 1.4px at 91% 27%, rgba(255,236,190,.75) 0, transparent 60%),
    radial-gradient(1px 1px at 14% 74%, rgba(255,255,255,.45) 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 88%, rgba(255,255,255,.55) 0, transparent 60%),
    radial-gradient(1px 1px at 86% 90%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(55% 40% at 50% 0%, rgba(139,92,246,.38), transparent 72%),
    radial-gradient(40% 35% at 12% 70%, rgba(236,72,153,.14), transparent 70%),
    radial-gradient(45% 40% at 92% 85%, rgba(56,189,248,.12), transparent 70%),
    linear-gradient(180deg, #1B1040 0%, #160C34 45%, #0F0826 100%);
}
.tarot-night .tarot-kicker{color:var(--tn-gold);letter-spacing:2.4px;}
.tarot-night .tarot-hub-hero h1{color:var(--tn-ink);font-size:44px;letter-spacing:.5px;}
.tarot-night .tarot-hub-hero h1::after{content:"";display:block;width:120px;height:10px;margin:12px auto 0;
  background:radial-gradient(circle,var(--tn-gold) 0 3px,transparent 3.5px) center/10px 10px no-repeat,
             linear-gradient(90deg,transparent,var(--tn-gold) 30%,transparent 46%,transparent 54%,var(--tn-gold) 70%,transparent) center/100% 1px no-repeat;}
.tarot-night .lead{color:var(--tn-soft);}

/* menu: violet glass with a gold active pill */
.tarot-night .tarot-menu{background:rgba(255,255,255,.06);border:1px solid rgba(242,196,107,.28);box-shadow:0 18px 40px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(6px);}
.tarot-night .tarot-menu a{color:var(--tn-ink);}
.tarot-night .tarot-menu a:hover{background:rgba(139,92,246,.22);}
.tarot-night .tarot-menu .tm-ico{background:rgba(242,196,107,.16);color:var(--tn-gold);}
.tarot-night .tarot-menu a.active{background:linear-gradient(135deg,#FFE2A0,var(--tn-gold) 45%,var(--tn-gold-2));color:#24123F;}
.tarot-night .tarot-menu a.active .tm-ico{background:#24123F;color:var(--tn-gold);}

/* tiles: gilded tarot cards (double gold frame), centred last row */
.tarot-night .tarot-hub-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:40px;}
.tarot-night .tarot-hub-tile{flex:0 1 230px;position:relative;padding:30px 20px 26px;border-radius:16px;
  background:linear-gradient(170deg, rgba(139,92,246,.20), rgba(30,16,70,.55) 55%, rgba(15,8,38,.75));
  border:1px solid rgba(242,196,107,.45);
  box-shadow:0 20px 40px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);}
.tarot-night .tarot-hub-tile::before{content:"";position:absolute;inset:7px;border:1px solid rgba(242,196,107,.22);border-radius:11px;pointer-events:none;}
.tarot-night .tarot-hub-tile::after{content:"\2726";position:absolute;top:12px;right:16px;font-size:11px;color:rgba(242,196,107,.55);}
.tarot-night .tarot-hub-tile:hover{transform:translateY(-6px);border-color:var(--tn-gold);
  box-shadow:0 26px 46px -24px rgba(139,92,246,.75), 0 0 0 1px rgba(242,196,107,.35), inset 0 1px 0 rgba(255,255,255,.1);}
.tarot-night .tarot-hub-glyph{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--tn-gold);background:radial-gradient(circle at 35% 30%, rgba(242,196,107,.28), rgba(242,196,107,.06) 70%);
  border:1px solid rgba(242,196,107,.5);box-shadow:0 0 22px -6px rgba(242,196,107,.55);}
.tarot-night .tarot-hub-glyph svg{width:32px;height:32px;}
.tarot-night .tarot-hub-tile-name{color:var(--tn-ink);font-size:23px;font-weight:600;}
.tarot-night .tarot-hub-tile-desc{color:var(--tn-soft);font-size:12.8px;}
@media (max-width:620px){
  .tarot-night .tarot-hub-hero h1{font-size:34px;}
  .tarot-night .tarot-hub-tile{flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){.tarot-night .tarot-hub-tile{transition:none;}}

/* ============ TAROT HUB option 2: "Celestial Dawn" (section.tarot-dawn) ============
   Light morning sky (lavender to peach) with cream gilded cards and one accent colour per reading.
   Switch themes by changing the section class in Tarot/Default.aspx: tarot-dawn / tarot-night / (none = original). */
.tarot-flow-section.tarot-dawn{
  --td-ink:#2B1B45; --td-soft:#5E4F78; --td-gold:#C9963B; --td-line:rgba(201,150,59,.45);
  color:var(--td-ink);
  background:
    radial-gradient(1.6px 1.6px at 9% 14%, rgba(201,150,59,.55) 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 27% 32%, rgba(140,110,200,.45) 0, transparent 60%),
    radial-gradient(1.6px 1.6px at 72% 12%, rgba(201,150,59,.55) 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 40%, rgba(140,110,200,.45) 0, transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 52%, rgba(201,150,59,.4) 0, transparent 60%),
    radial-gradient(50% 38% at 50% 0%, rgba(167,139,250,.38), transparent 72%),
    radial-gradient(45% 40% at 0% 60%, rgba(251,207,232,.55), transparent 70%),
    radial-gradient(45% 40% at 100% 75%, rgba(254,215,170,.55), transparent 70%),
    linear-gradient(180deg, #EFE7FF 0%, #FBF3FF 40%, #FFF6EC 100%);
}
.tarot-dawn .tarot-kicker, .tarot-dawn h1, .tarot-dawn h2, .tarot-dawn .lead, .tarot-dawn .tarot-nav{text-shadow:none;}
.tarot-dawn .tarot-kicker{color:#9A6A1E;letter-spacing:2.4px;}
.tarot-dawn .tarot-hub-hero h1{color:var(--td-ink);font-size:44px;}
.tarot-dawn .tarot-hub-hero h1::after{content:"\2726  \263E  \2726";display:block;margin-top:6px;font-size:14px;letter-spacing:6px;color:var(--td-gold);}
.tarot-dawn .lead{color:var(--td-soft);}

.tarot-dawn .tarot-menu{background:rgba(255,255,255,.75);border:1px solid rgba(124,92,190,.22);box-shadow:0 14px 32px -22px rgba(76,40,140,.55);}
.tarot-dawn .tarot-menu a{color:var(--td-ink);}
.tarot-dawn .tarot-menu a:hover{background:rgba(167,139,250,.18);color:var(--td-ink);}
.tarot-dawn .tarot-menu a.tm-home:not(.active){color:#6D3FC8;}
.tarot-dawn .tarot-menu .tm-ico{background:rgba(124,92,190,.12);color:#6D3FC8;}
.tarot-dawn .tarot-menu a.active{background:linear-gradient(135deg,#7C5CE0,#5B3CC4);color:#fff;box-shadow:0 8px 18px -8px rgba(91,60,196,.7);}
.tarot-dawn .tarot-menu a.active .tm-ico{background:#fff;color:#5B3CC4;}

.tarot-dawn .tarot-hub-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:40px;}
.tarot-dawn .tarot-hub-tile{--ac:#7C5CE0;--ac-bg:#F1EBFF;flex:0 1 230px;position:relative;color:var(--td-ink);padding:30px 20px 26px;border-radius:16px;
  background:linear-gradient(180deg,#FFFFFF,#FFFBF5);border:1px solid var(--td-line);
  box-shadow:0 18px 36px -26px rgba(76,40,140,.55);}
.tarot-dawn .tarot-hub-tile::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,150,59,.25);border-radius:11px;pointer-events:none;}
.tarot-dawn .tarot-hub-tile::after{content:"";position:absolute;left:50%;top:0;width:46px;height:3px;transform:translateX(-50%);border-radius:0 0 4px 4px;background:var(--ac);}
.tarot-dawn .tarot-hub-tile:hover{transform:translateY(-6px);border-color:var(--ac);box-shadow:0 24px 40px -22px color-mix(in srgb, var(--ac) 60%, transparent);}
.tarot-dawn .tarot-hub-glyph{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ac);background:var(--ac-bg);border:1px solid color-mix(in srgb, var(--ac) 30%, transparent);}
.tarot-dawn .tarot-hub-glyph svg{width:30px;height:30px;}
.tarot-dawn .tarot-hub-tile-name{color:var(--td-ink);font-size:23px;font-weight:600;}
.tarot-dawn .tarot-hub-tile-desc{color:var(--td-soft);font-size:12.8px;}
.tarot-dawn .tarot-hub-tile:nth-child(1){--ac:#6D3FC8;--ac-bg:#F0E9FF;}
.tarot-dawn .tarot-hub-tile:nth-child(2){--ac:#D9466F;--ac-bg:#FFE8EF;}
.tarot-dawn .tarot-hub-tile:nth-child(3){--ac:#0E8F86;--ac-bg:#DFF5F2;}
.tarot-dawn .tarot-hub-tile:nth-child(4){--ac:#3F51B5;--ac-bg:#E7EAFB;}
.tarot-dawn .tarot-hub-tile:nth-child(5){--ac:#C27A12;--ac-bg:#FFF1D9;}
.tarot-dawn .tarot-hub-tile:nth-child(6){--ac:#C2410C;--ac-bg:#FFE9DE;}
.tarot-dawn .tarot-hub-tile:nth-child(7){--ac:#2F7A4A;--ac-bg:#E3F3E8;}
@media (max-width:620px){
  .tarot-dawn .tarot-hub-hero h1{font-size:34px;}
  .tarot-dawn .tarot-hub-tile{flex:1 1 100%;}
}

/* ---- Celestial Dawn on the reading pages (Tarot, Love, Yes/No, Daily, One Card, Three Card, Card Meanings) ---- */
.tarot-dawn{--td-violet:#6D3FC8;--td-violet-2:#5B3CC4;--td-goldtext:#8A5A12;
  --td-back:radial-gradient(circle at 50% 46%, rgba(242,196,107,.22) 0%, transparent 42%), linear-gradient(155deg,#5B3CC4,#2E1C6B 55%,#1E1248);}
.tarot-dawn .tarot-crumbs, .tarot-dawn .tarot-today-date, .tarot-dawn .tarot-choose-line, .tarot-dawn .tarot-pick-sub{text-shadow:none;}
.tarot-dawn h1, .tarot-dawn h2{color:var(--td-ink);}
.tarot-dawn .tarot-crumbs{color:var(--td-soft);} .tarot-dawn .tarot-crumbs a{color:var(--td-violet);}

/* question step */
.tarot-dawn .tarot-question-box{background:#fff;border:1px solid rgba(109,63,200,.3);box-shadow:0 12px 28px -20px rgba(76,40,140,.55);}
.tarot-dawn .tarot-question-box input{color:var(--td-ink);}
.tarot-dawn .tarot-question-box input::placeholder{color:rgba(94,79,120,.6);}
.tarot-dawn .tarot-question-count{color:var(--td-soft);}
.tarot-dawn .tarot-input-row input[type="date"]{color-scheme:light;}
.tarot-dawn .tarot-today-date{color:var(--td-ink);}
.tarot-dawn .tarot-form-error{color:#B23A2E;}
.tarot-dawn .tarot-cta{border-color:var(--td-violet);color:var(--td-violet);background:#fff;}
.tarot-dawn .tarot-cta:hover{background:linear-gradient(135deg,#7C5CE0,var(--td-violet-2));border-color:var(--td-violet-2);color:#fff;}
.tarot-dawn .tarot-cta:disabled:hover{background:#fff;color:var(--td-violet);}

/* pick step: violet card backs with gold trim */
.tarot-dawn .tarot-choose-line{color:var(--td-ink);}
.tarot-dawn .tarot-count-badge{border-color:var(--td-gold);color:var(--td-ink);background:#fff;}
.tarot-dawn .tarot-shuffle-btn{border-color:rgba(109,63,200,.4);background:#fff;color:var(--td-violet);}
.tarot-dawn .tarot-shuffle-btn:hover{border-color:var(--td-violet);background:#F1EBFF;color:var(--td-violet);}
.tarot-dawn .tarot-pick-sub{color:var(--td-soft);}
.tarot-dawn .tarot-fan::before{background:radial-gradient(ellipse at center, rgba(167,139,250,.28), transparent 68%);}
.tarot-dawn .tarot-fan-card, .tarot-dawn .tarot-fly-card, .tarot-dawn .tarot-picked-slot.filled{background:var(--td-back);border-color:rgba(201,150,59,.8);box-shadow:0 12px 24px -12px rgba(46,28,107,.6);}
.tarot-dawn .tarot-fan-card:hover:not(.picked){box-shadow:0 6px 26px -4px rgba(109,63,200,.55);}
.tarot-dawn .tarot-picked-slot{border-color:rgba(109,63,200,.4);background:rgba(124,92,190,.07);}
.tarot-dawn .tarot-picked-slot > span{color:var(--td-violet);}
.tarot-fly-card{background:radial-gradient(circle at 50% 46%, rgba(242,196,107,.22) 0%, transparent 42%), linear-gradient(155deg,#5B3CC4,#2E1C6B 55%,#1E1248);}

/* spread / reveal step */
.tarot-dawn .tarot-slot-label{color:var(--td-goldtext);}
.tarot-dawn .tarot-card-back{border-color:var(--td-gold);
  background-image:linear-gradient(45deg, rgba(255,255,255,.14) 1px, transparent 1px),linear-gradient(-45deg, rgba(255,255,255,.14) 1px, transparent 1px),linear-gradient(150deg,#6D4BD8,#2A1A63);}
.tarot-dawn .tarot-card-back::after{color:#F2C46B;}
.tarot-dawn .tarot-card-flip:not(.flipped):hover .tarot-card-back{box-shadow:0 8px 26px -6px rgba(109,63,200,.55);}
.tarot-dawn .tarot-card-flip.flipped{box-shadow:0 18px 40px -18px rgba(46,28,107,.55);}
.tarot-dawn .tarot-flip-prompt{color:var(--td-soft);}
.tarot-dawn .tarot-reveal-text{color:#3E2F57;}
.tarot-dawn .reveal-cursor{background:var(--td-violet);}
.tarot-dawn .tarot-reading-outro{border-top-color:rgba(43,27,69,.12);}
.tarot-dawn .tarot-reading-outro p{color:var(--td-soft);}
.tarot-dawn .tarot-outro-ctas .btn{background:#fff;border-color:rgba(109,63,200,.35);color:var(--td-violet);}
.tarot-dawn .tarot-outro-ctas .btn:hover{border-color:var(--td-violet);background:#F1EBFF;color:var(--td-violet);}
.tarot-dawn .tarot-verdict{color:var(--td-violet);}

/* card meanings */
.tarot-dawn .tarot-search-box input{background:#fff;border-color:rgba(109,63,200,.3);color:var(--td-ink);box-shadow:0 12px 28px -22px rgba(76,40,140,.55);}
.tarot-dawn .tarot-search-box input::placeholder{color:rgba(94,79,120,.6);}
.tarot-dawn .tarot-filter-tab{background:#fff;border-color:rgba(109,63,200,.28);color:var(--td-ink);}
.tarot-dawn .tarot-filter-tab.active{background:linear-gradient(135deg,#7C5CE0,var(--td-violet-2));border-color:var(--td-violet-2);color:#fff;}
.tarot-dawn .tarot-meaning-count, .tarot-dawn .tarot-meaning-empty{color:var(--td-soft);}
.tarot-dawn .tarot-meaning-tile{background:linear-gradient(180deg,#fff,#FFFBF5);border-color:var(--td-line);box-shadow:0 14px 30px -24px rgba(76,40,140,.55);}
.tarot-dawn .tarot-meaning-tile:hover, .tarot-dawn .tarot-meaning-tile.active{border-color:var(--td-violet);}
.tarot-dawn .tarot-meaning-tile-num{color:var(--td-soft);}
.tarot-dawn .tarot-meaning-tile-face, .tarot-dawn .tarot-detail-face{
  background-image:linear-gradient(45deg, rgba(255,255,255,.12) 1px, transparent 1px),linear-gradient(-45deg, rgba(255,255,255,.12) 1px, transparent 1px),linear-gradient(150deg,#6D4BD8,#2A1A63);}
.tarot-dawn .tarot-meaning-tile-face:has(img), .tarot-dawn .tarot-detail-face:has(img){background:none;}
.tarot-dawn .tarot-meaning-tile-face img{box-shadow:0 10px 22px -12px rgba(46,28,107,.55);}
.tarot-dawn .tarot-meaning-tile:hover .tarot-meaning-tile-face img{box-shadow:0 16px 30px -12px rgba(109,63,200,.45);}
.tarot-dawn .tarot-detail-face img{box-shadow:0 18px 40px -16px rgba(46,28,107,.55);}
.tarot-dawn .tarot-meaning-tile-name, .tarot-dawn .tarot-detail-name{color:var(--td-ink);}
.tarot-dawn .tarot-meaning-tag{background:rgba(201,150,59,.16);color:var(--td-goldtext);}
.tarot-dawn .tarot-detail-panel{border-top-color:rgba(43,27,69,.12);}
.tarot-dawn .tarot-detail-kicker, .tarot-dawn .tarot-orient-card h4{color:var(--td-goldtext);}
.tarot-dawn .tarot-orient-card, .tarot-dawn .tarot-area-card{background:#fff;border-color:rgba(109,63,200,.16);box-shadow:0 12px 26px -22px rgba(76,40,140,.5);}
.tarot-dawn .tarot-orient-card p, .tarot-dawn .tarot-area-card .u{color:#3E2F57;}
.tarot-dawn .tarot-area-card h5, .tarot-dawn .tarot-area-card .r{color:var(--td-soft);}
.tarot-dawn .tarot-info-bar{background:rgba(109,63,200,.14);}
.tarot-dawn .tarot-info-cell{background:#FFFDF8;}
.tarot-dawn .tarot-info-cell-label{color:var(--td-soft);}
.tarot-dawn .tarot-info-cell-value{color:var(--td-ink);}