/* Tarot4U | Glowing rainbow spread choice cards
   Extends the ten-color neon category palette into the spread-selection screen.
   Scope deliberately excludes drawn tarot cards, homepage categories,
   reading text, print pages and all payment / account controls.
*/
.spread-collection .spread-grid{
  gap:clamp(15px,1.65vw,23px);
  padding:9px 6px 26px;
  overflow:visible;
}
.spread-collection .spread-grid > .spread-card{
  --spread-neon:#ff1853;
  --spread-neon-lit:#ff89a4;
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:307px;
  overflow:hidden;
  padding:20px 21px 19px;
  border:1.5px solid color-mix(in srgb,var(--spread-neon) 82%,#ffffff 18%);
  border-radius:19px;
  background:
    radial-gradient(ellipse at 90% -12%,color-mix(in srgb,var(--spread-neon) 27%,transparent),transparent 60%),
    radial-gradient(ellipse at -16% 116%,color-mix(in srgb,var(--spread-neon) 15%,transparent),transparent 65%),
    linear-gradient(151deg,#1a101d 0%,#100b18 45%,#05050e 100%);
  box-shadow:
    inset 0 0 24px color-mix(in srgb,var(--spread-neon) 11%,transparent),
    0 0 0 1px color-mix(in srgb,var(--spread-neon) 20%,transparent),
    0 0 19px color-mix(in srgb,var(--spread-neon) 40%,transparent),
    0 0 48px color-mix(in srgb,var(--spread-neon) 12%,transparent),
    0 15px 30px #000b;
  text-align:left;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
/* Keep the rainbow moving across groups, not restarting at each heading. */
.spread-collection .spread-card[data-neon-spread="0"]{--spread-neon:#ff174f;--spread-neon-lit:#ff91a9}
.spread-collection .spread-card[data-neon-spread="1"]{--spread-neon:#ff6800;--spread-neon-lit:#ffb46b}
.spread-collection .spread-card[data-neon-spread="2"]{--spread-neon:#ffe600;--spread-neon-lit:#fff67c}
.spread-collection .spread-card[data-neon-spread="3"]{--spread-neon:#00ef72;--spread-neon-lit:#85ffc1}
.spread-collection .spread-card[data-neon-spread="4"]{--spread-neon:#00dfff;--spread-neon-lit:#98f6ff}
.spread-collection .spread-card[data-neon-spread="5"]{--spread-neon:#1681ff;--spread-neon-lit:#90c5ff}
.spread-collection .spread-card[data-neon-spread="6"]{--spread-neon:#6458ff;--spread-neon-lit:#b7acff}
.spread-collection .spread-card[data-neon-spread="7"]{--spread-neon:#a643ff;--spread-neon-lit:#d6a3ff}
.spread-collection .spread-card[data-neon-spread="8"]{--spread-neon:#e237ff;--spread-neon-lit:#f4a5ff}
.spread-collection .spread-card[data-neon-spread="9"]{--spread-neon:#ff2cae;--spread-neon-lit:#ff9cdb}
/* Neon tube at the top edge; stars stay behind real labels/buttons. */
.spread-collection .spread-grid > .spread-card::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:0;left:12%;right:12%;height:3px;
  background:linear-gradient(90deg,transparent,var(--spread-neon),var(--spread-neon-lit),var(--spread-neon),transparent);
  box-shadow:0 0 12px var(--spread-neon),0 0 29px color-mix(in srgb,var(--spread-neon) 70%,transparent);
}
.spread-collection .spread-grid > .spread-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle,#fffaf0 0 .8px,transparent 1.3px) 17px 19px / 115px 107px,
    radial-gradient(circle,var(--spread-neon-lit) 0 .8px,transparent 1.4px) 43px 51px / 137px 141px;
  opacity:.37;
}
.spread-collection .spread-grid > .spread-card > *{position:relative;z-index:1}
.spread-collection .spread-grid .spread-mini{
  height:112px;
  flex-shrink:0;
  border:1px solid color-mix(in srgb,var(--spread-neon) 58%,transparent);
  border-radius:12px;
  background:
    radial-gradient(ellipse at center,color-mix(in srgb,var(--spread-neon) 22%,transparent),transparent 78%),
    linear-gradient(125deg,#140a1b,#070812);
  box-shadow:inset 0 0 23px color-mix(in srgb,var(--spread-neon) 10%,transparent),0 0 13px color-mix(in srgb,var(--spread-neon) 19%,transparent);
}
.spread-collection .spread-grid .spread-mini i{
  border:1px solid var(--spread-neon-lit);
  background:linear-gradient(160deg,color-mix(in srgb,var(--spread-neon) 32%,#181020 68%),#0b0817 80%);
  color:#fff;
  text-shadow:0 0 7px var(--spread-neon-lit);
  box-shadow:0 0 7px color-mix(in srgb,var(--spread-neon) 63%,transparent),0 0 18px color-mix(in srgb,var(--spread-neon) 30%,transparent),0 2px 6px #000d;
}
.spread-collection .spread-grid .spread-number{
  color:var(--spread-neon-lit);
  text-shadow:0 0 10px color-mix(in srgb,var(--spread-neon) 57%,transparent);
  letter-spacing:.11em;
  margin-top:8px;
}
.spread-collection .spread-grid .spread-card h3{
  color:#fff9f4;
  font:700 clamp(21px,1.8vw,27px)/1.16 Georgia,'Times New Roman',serif;
  margin:10px 0 11px;
  text-shadow:0 2px 10px #000c,0 0 14px color-mix(in srgb,var(--spread-neon) 23%,transparent);
  text-wrap:balance;
}
.spread-collection .spread-grid .spread-card p{
  color:#e9dfe8;
  font-size:.89rem;
  line-height:1.55;
  margin-bottom:15px;
}
/* A full glowing call-to-action ribbon, rather than tiny gold text. */
.spread-collection .spread-grid .spread-open-label,
.spread-collection .spread-grid .spread-upgrade-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:42px;
  padding:10px 12px;
  margin-top:auto;
  border-radius:10px;
  border:1px solid var(--spread-neon-lit);
  background:linear-gradient(117deg,var(--spread-neon),var(--spread-neon-lit));
  box-shadow:inset 0 1px #ffffffa6,0 0 15px color-mix(in srgb,var(--spread-neon) 59%,transparent),0 0 33px color-mix(in srgb,var(--spread-neon) 23%,transparent);
  color:#100a18;
  text-shadow:none;
  font:800 12px/1.35 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.01em;
  text-transform:none;
}
.spread-collection .spread-grid .spread-upgrade-label{background:linear-gradient(117deg,color-mix(in srgb,var(--spread-neon) 70%,#1a0b22),var(--spread-neon-lit));}
.spread-collection .spread-grid > .spread-card:hover,
.spread-collection .spread-grid > .spread-card:focus-visible{
  transform:translateY(-6px);
  border-color:var(--spread-neon-lit);
  box-shadow:
    0 0 0 1px var(--spread-neon),
    0 0 28px color-mix(in srgb,var(--spread-neon) 61%,transparent),
    0 0 66px color-mix(in srgb,var(--spread-neon) 25%,transparent),
    0 25px 36px #000d,
    inset 0 0 32px color-mix(in srgb,var(--spread-neon) 20%,transparent);
}
.spread-collection .spread-grid > .spread-card:hover .spread-open-label,
.spread-collection .spread-grid > .spread-card:focus-visible .spread-open-label,
.spread-collection .spread-grid > .spread-card:hover .spread-upgrade-label,
.spread-collection .spread-grid > .spread-card:focus-visible .spread-upgrade-label{
  box-shadow:0 0 20px color-mix(in srgb,var(--spread-neon) 90%,transparent),0 0 46px color-mix(in srgb,var(--spread-neon) 45%,transparent);
  filter:brightness(1.07);
}
.spread-collection .spread-grid > .spread-card:focus-visible{outline:3px solid #fff9ef;outline-offset:5px}
@media(max-width:600px){
  .spread-collection .spread-grid{gap:16px;padding-inline:3px}
  .spread-collection .spread-grid > .spread-card{min-height:280px;padding:20px}
}
@media(prefers-reduced-motion:reduce){
  .spread-collection .spread-grid > .spread-card{transition:none}
  .spread-collection .spread-grid > .spread-card:hover{transform:none}
}