:root { --tarot-card: rgba(13,13,40,.9); }

/* ── Breadcrumb ── */
.breadcrumb-bar { padding: 1rem 0; font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .1em; color: var(--muted); }
.breadcrumb-bar a { color: var(--muted); text-decoration: none; transition: color .2s; }
.breadcrumb-bar a:hover { color: var(--purple); }
.breadcrumb-bar .sep { margin: 0 .5rem; }

/* ── Card detail ── */
.card-wrap { max-width: 760px; margin: 0 auto; padding: 2rem 0 6rem; }
.card-frame { background: var(--tarot-card); border: 1px solid rgba(167,139,250,.2); border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 20px 60px rgba(124,58,237,.12); }
.card-frame::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124,58,237,.15) 0%, transparent 60%); pointer-events: none; }

/* ── Card art ── */
.card-art { height: 260px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid rgba(167,139,250,.15); background: linear-gradient(180deg, rgba(124,58,237,.08) 0%, transparent 100%); }
.card-art-symbol { font-size: 6rem; line-height: 1; filter: drop-shadow(0 0 40px rgba(124,58,237,.5)); }
.card-art-glow { position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%); border-radius: 50%; }

/* ── Card body ── */
.card-body-inner { padding: 2.5rem 2.5rem 2rem; }
.card-meta-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.meta-badge { font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 50px; }
.badge-major    { background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.4);  color: #c084fc; }
.badge-wands    { background: rgba(239,108,0,.12);  border: 1px solid rgba(239,108,0,.35);  color: #ff9f43; }
.badge-cups     { background: rgba(33,150,243,.12); border: 1px solid rgba(33,150,243,.35); color: #74c7ec; }
.badge-swords   { background: rgba(200,200,220,.1); border: 1px solid rgba(200,200,220,.3); color: #c8c4dc; }
.badge-pentacles{ background: rgba(76,175,80,.12);  border: 1px solid rgba(76,175,80,.35);  color: #a5d6a7; }
.card-number-label { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .15em; color: #9e9abe; }
.card-title-main { font-family: 'Cinzel Decorative', serif; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: #e8d8ff; margin-bottom: .5rem; line-height: 1.2; }
.card-arcane-line { font-family: 'Cinzel', serif; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: #9e9abe; margin-bottom: 1.75rem; }
.divider-ornament { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.divider-ornament::before, .divider-ornament::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider-ornament span { color: #c084fc; font-size: .8rem; }
.card-description { font-family: 'Raleway', sans-serif; font-size: 1.05rem; line-height: 1.85; color: #c8c4dc; font-weight: 300; font-style: italic; }

/* ── Yes / No Oracle ── */
.yes-no-block { margin-bottom: 2rem; }
.yes-no-label { font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(200,196,220,.6); margin-bottom: .65rem; }
.yes-no-verdict { font-family: 'Cinzel', serif; font-size: 1.15rem; letter-spacing: .06em; font-weight: 600; margin-bottom: .45rem; }
.verdict-yes        { color: #34d399; }
.verdict-strong_yes { color: #fbbf24; text-shadow: 0 0 20px rgba(251,191,36,.3); }
.verdict-maybe      { color: #fcd34d; }
.verdict-no         { color: #f87171; }
.verdict-no_wait    { color: #c4b5d4; }
.yes-no-note { font-family: 'Raleway', sans-serif; font-size: .85rem; line-height: 1.65; color: #b0accc; font-style: italic; margin: 0; }

/* ── Prev/Next navigation ── */
.card-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2.5rem; border-top: 1px solid rgba(167,139,250,.15); gap: 1rem; }
.nav-arrow { display: flex; align-items: center; gap: .5rem; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .1em; color: var(--muted); text-decoration: none; padding: .5rem .9rem; border: 1px solid rgba(167,139,250,.2); border-radius: 8px; background: rgba(124,58,237,.05); transition: all .2s; max-width: 45%; }
.nav-arrow:hover { border-color: rgba(124,58,237,.4); color: var(--purple); background: rgba(124,58,237,.08); }
.nav-arrow.next { margin-left: auto; text-align: right; }
.nav-arrow-title { font-size: .78rem; color: var(--text-soft); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-arrow-label { font-size: .62rem; color: var(--muted); display: block; letter-spacing: .12em; }
.back-all { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .12em; color: var(--muted); text-decoration: none; transition: color .2s; }
.back-all:hover { color: var(--purple); }