/* ── Play header ── */
.play-header { padding: 3rem 0 2rem; text-align: center; }
.play-tag { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--purple); margin-bottom: .75rem; display: inline-block; }
.play-title { font-family: 'Cinzel Decorative', serif; font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--text); margin-bottom: .5rem; }
.play-meta { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.meta-pill { font-family: 'Cinzel', serif; font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 50px; background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.25); color: var(--purple); }
.meta-pill.gold { background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.25); color: var(--gold); }
.play-sub { font-size: .88rem; color: var(--muted); margin-top: .5rem; }

/* ── Draw CTA (initial state) ── */
.draw-cta { text-align: center; padding: 3.5rem 1rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0; }
.draw-orb { font-size: 4.5rem; color: var(--purple); opacity: .3; margin-bottom: 1.5rem; animation: pulse-orb 3s ease-in-out infinite; }
.draw-hint { font-family: 'Raleway', sans-serif; font-style: italic; color: var(--muted); font-size: .92rem; margin-bottom: 2rem; }
.btn-draw { display: inline-flex; align-items: center; gap: .6rem; background: var(--purple); color: #fff; border-radius: 12px; padding: 1rem 2.75rem; font-family: 'Cinzel', serif; font-size: .85rem; letter-spacing: .15em; text-decoration: none; box-shadow: 0 0 32px rgba(124,58,237,.35); transition: opacity .2s, box-shadow .2s; margin-bottom: 3rem; }
.btn-draw:hover { opacity: .9; color: #fff; box-shadow: 0 0 52px rgba(124,58,237,.55); }
@keyframes pulse-orb { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .55; transform: scale(1.12); } }

/* ── Re-draw ── */
.redraw-wrap { text-align: center; margin: 0 0 2.5rem; }
.btn-redraw { display: inline-flex; align-items: center; gap: .55rem; background: transparent; color: var(--purple); border: 1px solid rgba(124,58,237,.4); border-radius: 10px; padding: .65rem 1.75rem; font-family: 'Cinzel', serif; font-size: .75rem; letter-spacing: .12em; cursor: pointer; text-decoration: none; transition: all .2s; }
.btn-redraw:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ── Card grid ── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; }
.drawn-card { background: rgba(13,13,40,.9); border: 1px solid rgba(167,139,250,.2); border-radius: 16px; overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.drawn-card:hover { border-color: rgba(167,139,250,.45); box-shadow: 0 10px 36px rgba(124,58,237,.18); }
.drawn-card.reversed { border-color: rgba(180,83,9,.35); }
.drawn-card.reversed:hover { border-color: rgba(180,83,9,.6); box-shadow: 0 10px 36px rgba(180,83,9,.15); }

/* ── Card art ── */
.card-art { height: 140px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid rgba(167,139,250,.12); background: linear-gradient(180deg, rgba(124,58,237,.08) 0%, transparent 100%); }
.drawn-card.reversed .card-art { border-bottom-color: rgba(180,83,9,.18); background: linear-gradient(180deg, rgba(180,83,9,.1) 0%, transparent 100%); }
.card-art-symbol { font-size: 3.5rem; line-height: 1; transition: transform .3s; }
.drawn-card.reversed .card-art-symbol { transform: rotate(180deg); }

/* ── Card inner ── */
.card-inner { padding: 1.25rem 1.25rem 1.5rem; }
.card-pos { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: #9e9abe; margin-bottom: .4rem; }
.card-name { font-family: 'Cinzel', serif; font-size: .9rem; color: #e8d8ff; margin-bottom: .5rem; line-height: 1.3; }
.card-name a { color: inherit; text-decoration: none; transition: color .2s; }
.card-name a:hover { color: #c084fc; }
.card-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.card-badge { font-size: .6rem; padding: .15rem .55rem; border-radius: 50px; font-family: 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; }
.badge-major    { background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.35); color: #c084fc; }
.badge-wands    { background: rgba(239,108,0,.1);   border: 1px solid rgba(239,108,0,.3);   color: #ff9f43; }
.badge-cups     { background: rgba(33,150,243,.1);  border: 1px solid rgba(33,150,243,.3);  color: #74c7ec; }
.badge-swords   { background: rgba(224,224,224,.1); border: 1px solid rgba(200,200,220,.3); color: #c8c4dc; }
.badge-pentacles{ background: rgba(76,175,80,.1);   border: 1px solid rgba(76,175,80,.3);   color: #a5d6a7; }
.badge-reversed { background: rgba(180,83,9,.1); border: 1px solid rgba(180,83,9,.3); color: #b45309; }
.card-desc { font-size: .82rem; color: #a09ac8; line-height: 1.7; font-style: italic; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.view-link { display: inline-flex; align-items: center; gap: .3rem; font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .1em; color: #9e9abe; text-decoration: none; margin-top: .75rem; transition: color .2s; }
.view-link:hover { color: #c084fc; }

/* ── Yes / No verdict (yes_no spread type) ── */
.play-verdict { font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: .06em; font-weight: 600; margin: .6rem 0 .35rem; }
.not-prefix { font-size: .75em; letter-spacing: .2em; opacity: .75; margin-right: .3em; }
.verdict-yes        { color: #5dba8a; }
.verdict-strong_yes { color: #b45309; text-shadow: 0 0 14px rgba(180,83,9,.3); }
.verdict-maybe      { color: #c9a63a; }
.verdict-no         { color: #d96060; }
.verdict-no_wait    { color: #a08898; }
.play-verdict-note { font-size: .8rem; color: #8a86b0; font-style: italic; line-height: 1.55; margin-bottom: .25rem; }

/* ── Back bar ── */
.back-bar { text-align: center; margin-bottom: 4rem; }
.btn-back { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .1em; color: var(--muted); text-decoration: none; padding: .5rem 1rem; border: 1px solid var(--border); border-radius: 8px; transition: all .2s; }
.btn-back:hover { border-color: var(--purple); color: var(--purple); }

@media (max-width: 576px) { .cards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }