/* ═══════════════════════════════════════════════════════════
   A WORLD WITHOUT JEWS — stylesheet
   Aesthetic: illuminated manuscript × playing card
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:          #0e0d0b;
  --bg-card:     #161410;
  --bg-elevated: #1e1b17;
  --gold:        #c9a84c;
  --gold-light:  #e8c97a;
  --gold-dim:    #7a6230;
  --cream:       #f0e8d5;
  --cream-dim:   #a89880;
  --red-accent:  #8b2020;
  --green:       #2a5c3f;
  --text:        #e8dfc8;
  --text-dim:    #8a7f6a;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --radius:      12px;
  --radius-card: 16px;
  --shadow:      0 8px 40px rgba(0,0,0,0.6);
  --glow:        0 0 24px rgba(201,168,76,0.15);

  --transition:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { display: block; max-width: 100%; }

/* ── Screen system ─────────────────────────────────────────── */
.screen {
  display: none;
  min-height: 100dvh;
  position: relative;
}
.screen.active { display: flex; flex-direction: column; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.25rem;
  background: var(--gold);
  color: #0e0d0b;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(201,168,76,0.3);
  width: 100%;
  max-width: 360px;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201,168,76,0.4);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.1rem;
  border-radius: var(--radius);
  transition: var(--transition);
  width: 100%;
  max-width: 360px;
}
.btn-secondary:hover { border-color: var(--gold); background: rgba(201,168,76,0.08); }

/* ═══════════════════════════════════════════════════════════
   SCREEN 1 — LANDING
   ═══════════════════════════════════════════════════════════ */
#screen-landing {
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.landing-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #1a1508 0%, var(--bg) 70%);
  z-index: 0;
}

/* Subtle animated stars */
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(201,168,76,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 15%, rgba(201,168,76,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 60%, rgba(201,168,76,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 80%, rgba(201,168,76,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 65%, rgba(201,168,76,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 25%, rgba(201,168,76,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 45%, rgba(201,168,76,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 55%, rgba(201,168,76,0.2) 0%, transparent 100%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.landing-content {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 460px;
}

.landing-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.landing-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--cream);
  text-shadow: 0 2px 40px rgba(201,168,76,0.2);
  animation: fadeUp 1s ease both;
}
.landing-title em {
  font-style: italic;
  color: var(--gold);
  display: block;
}

.landing-sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.7;
  animation: fadeUp 1s 0.15s ease both;
}
.landing-sub em { color: var(--gold-light); font-style: normal; font-weight: 600; }

.privacy-notice {
  font-size: 0.8rem;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: fadeUp 1s 0.25s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   SCREEN 2 — DICE ROLL
   ═══════════════════════════════════════════════════════════ */
#screen-dice {
  justify-content: center;
  align-items: center;
  background: var(--bg);
}

.dice-container {
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.dice-label {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--cream-dim);
}

.dice {
  font-size: clamp(6rem, 25vw, 10rem);
  animation: diceRoll 1.8s ease-out forwards;
  filter: drop-shadow(0 0 30px rgba(201,168,76,0.4));
  transform-origin: center;
}
@keyframes diceRoll {
  0%   { transform: rotate(0deg) scale(0.5); opacity: 0; }
  20%  { transform: rotate(180deg) scale(1.2); opacity: 1; }
  40%  { transform: rotate(320deg) scale(0.9); }
  60%  { transform: rotate(420deg) scale(1.1); }
  80%  { transform: rotate(480deg) scale(1.0); }
  100% { transform: rotate(520deg) scale(1.0); opacity: 1; }
}

.dice-result {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  color: var(--gold-light);
  max-width: 320px;
  line-height: 1.5;
  opacity: 0;
  animation: fadeIn 0.6s 2s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   SCREEN 3 — QUESTION
   ═══════════════════════════════════════════════════════════ */
#screen-question {
  justify-content: flex-start;
  min-height: 100dvh;
}

.progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  position: relative;
  flex-shrink: 0;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.6s ease;
  width: 0%;
}

.stage-badge {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  padding: 0.75rem 1rem 0;
  font-weight: 500;
}

.question-wrap {
  flex: 1;
  padding: 1rem 1.25rem 200px;  /* bottom pad for tray */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
}

.question-card {
  background: var(--bg-card);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
  position: relative;
}
.question-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.question-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.4;
}

.answers-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.answer-btn {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  text-align: left;
  transition: var(--transition);
  line-height: 1.4;
}
.answer-btn:hover, .answer-btn:focus-visible {
  border-color: var(--gold);
  background: rgba(201,168,76,0.08);
  color: var(--gold-light);
  transform: translateX(4px);
}
.answer-btn:active { transform: translateX(0); }

/* ── Card Tray ─────────────────────────────────────────────── */
.card-tray {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-card);
  border-top: 1px solid rgba(201,168,76,0.2);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
  transition: transform var(--transition);
}

.tray-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  color: var(--text);
  font-family: var(--font-body);
}
.tray-count {
  background: var(--gold);
  color: #0e0d0b;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 100px;
  min-width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  transition: transform 0.3s;
}
.tray-label { font-size: 0.875rem; flex: 1; text-align: left; color: var(--cream-dim); }
.tray-chevron {
  font-size: 0.7rem;
  color: var(--gold-dim);
  transition: transform var(--transition);
}
.card-tray.open .tray-chevron { transform: rotate(180deg); }

.tray-cards {
  display: flex;
  gap: 0.75rem;
  padding: 0 1.25rem 1.25rem;
  overflow-x: auto;
  max-height: 0;
  overflow-y: hidden;
  transition: max-height var(--transition);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.card-tray.open .tray-cards { max-height: 260px; }

/* ── Mini figure card (in tray) ────────────────────────────── */
.figure-card-mini {
  flex-shrink: 0;
  width: 110px;
  background: var(--bg-elevated);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  overflow: hidden;
  animation: cardPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cardPop {
  from { transform: scale(0.6) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.figure-card-mini-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-card);
}
.figure-card-mini-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--bg-card);
  color: var(--gold-dim);
}
.figure-card-mini-name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.4rem 0.4rem;
  line-height: 1.2;
  color: var(--cream);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   SCREEN 4 — CASCADE PASS
   ═══════════════════════════════════════════════════════════ */
#screen-cascade {
  justify-content: center;
  align-items: center;
  background: var(--bg);
}

.cascade-wrap {
  text-align: center;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 400px;
}

.cascade-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #a8e6c8;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(42,92,63,0.5);
}

.cascade-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--cream);
}

.cascade-body {
  color: var(--cream-dim);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   SCREEN 5 — FIGURE REVEAL
   ═══════════════════════════════════════════════════════════ */
#screen-figure {
  justify-content: center;
  align-items: center;
  background: var(--bg);
  background-image: radial-gradient(ellipse 60% 50% at 50% 40%, #1a1508, transparent);
}

.figure-reveal-wrap {
  text-align: center;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 400px;
  width: 100%;
}

.figure-reveal-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Large figure card (reveal + end screen) ───────────────── */
.figure-card {
  background: var(--bg-card);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow), var(--glow);
  width: 100%;
  max-width: 300px;
  animation: cardReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  position: relative;
}
.figure-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@keyframes cardReveal {
  from { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  to   { transform: rotateY(0) scale(1); opacity: 1; }
}

.figure-card-image-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-elevated);
}
.figure-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.figure-card-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--gold-dim);
}
.figure-card-image.loaded + .figure-card-image-placeholder { display: none; }

.figure-card-body {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(201,168,76,0.1);
}
.figure-card-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.figure-card-years {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}
.figure-card-bio {
  font-size: 0.875rem;
  color: var(--cream-dim);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   SCREEN 6 — END / SHARE
   ═══════════════════════════════════════════════════════════ */
#screen-end, #screen-share-view {
  justify-content: flex-start;
}

.end-scroll {
  overflow-y: auto;
  padding: 2rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.end-header { text-align: center; max-width: 480px; }

.end-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 0.5rem;
}

.end-subtitle {
  color: var(--cream-dim);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.end-quote {
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--gold-light);
  text-align: left;
  line-height: 1.7;
}

.end-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 680px;
}
.end-cards .figure-card {
  max-width: 100%;
  animation: fadeUp 0.4s ease both;
}

.end-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 360px;
}

.share-result {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.share-result p {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.share-url-wrap {
  display: flex;
  gap: 0.5rem;
}
.share-url {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.6rem 0.75rem;
  font-family: monospace;
}
.btn-copy {
  background: var(--bg-elevated);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  transition: var(--transition);
}
.btn-copy:hover { background: rgba(201,168,76,0.1); }
.btn-copy.copied { color: #4caf7d; border-color: #2a5c3f; }

/* ── Loading state ─────────────────────────────────────────── */
.loading {
  display: flex;
  justify-content: center;
  padding: 3rem;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(201,168,76,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utility ───────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

/* ── Responsive tweaks ─────────────────────────────────────── */
@media (min-width: 480px) {
  .question-wrap { padding-bottom: 220px; }
  .answer-btn { font-size: 1.05rem; }
}

@media (min-width: 768px) {
  .end-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .figure-card-bio { font-size: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════
   SCREEN 4 — CHALLENGE (core mechanic)
   ═══════════════════════════════════════════════════════════ */
#screen-challenge {
  justify-content: flex-start;
  background: var(--bg);
  background-image: radial-gradient(ellipse 70% 50% at 50% 20%, #1a0808, transparent);
}

.challenge-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 2rem 1.25rem 2rem;
  gap: 1.5rem;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.challenge-header { text-align: center; }

.challenge-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--red-accent);
  color: #ffaaaa;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 0 30px rgba(139,32,32,0.5);
}

.challenge-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 0.75rem;
}

.challenge-narrative {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-style: italic;
  color: #e8a0a0;
  line-height: 1.6;
}

.challenge-figure-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.challenge-figure-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.challenge-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
}

.challenge-cta {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--cream-dim);
  text-align: center;
}

.btn-add {
  background: var(--gold);
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(201,168,76,0.3); }
  50%       { box-shadow: 0 4px 40px rgba(201,168,76,0.6); }
}

/* ═══════════════════════════════════════════════════════════
   SCREEN 5 — SAVED
   ═══════════════════════════════════════════════════════════ */
#screen-saved {
  justify-content: center;
  align-items: center;
  background: var(--bg);
  background-image: radial-gradient(ellipse 70% 50% at 50% 40%, #081a0e, transparent);
}

.saved-wrap {
  text-align: center;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 400px;
  width: 100%;
}

.saved-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #a8e6c8;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(42,92,63,0.6);
  animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.saved-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  font-weight: 700;
  color: var(--cream);
}

.saved-body {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.6;
}

.saved-card { width: 100%; max-width: 260px; }

/* ═══════════════════════════════════════════════════════════
   SCREEN 6 — LUCKY PASS
   ═══════════════════════════════════════════════════════════ */
#screen-lucky {
  justify-content: center;
  align-items: center;
  background: var(--bg);
}

.lucky-wrap {
  text-align: center;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 380px;
}

.lucky-dice {
  font-size: clamp(4rem, 18vw, 7rem);
  filter: drop-shadow(0 0 20px rgba(201,168,76,0.3));
  animation: diceSettle 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes diceSettle {
  from { transform: rotate(-30deg) scale(0.7); opacity: 0; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}

.lucky-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  font-weight: 700;
  color: var(--gold-light);
}

.lucky-body {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.6;
}

/* ── Image fix: contain instead of cover so faces aren't cropped ─── */
.figure-card-image {
  object-fit: contain !important;
  object-position: center top !important;
  background: var(--bg-elevated);
}

/* ═══════════════════════════════════════════════════════════
   ROULETTE SCREEN
   ═══════════════════════════════════════════════════════════ */
#screen-roulette {
  justify-content: flex-start;
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 60% at 50% 30%, #120f08, transparent);
  overflow: hidden;
}

.roulette-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1rem 180px;
  gap: 0.75rem;
  width: 100%;
}

.roulette-stage-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
}

.roulette-question {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4.5vw, 1.3rem);
  font-style: italic;
  color: var(--cream-dim);
  text-align: center;
  max-width: 320px;
  line-height: 1.4;
}

.wheel-pointer {
  color: var(--gold);
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.6));
  z-index: 2;
  margin-bottom: -6px;
}

#wheel-container {
  position: relative;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,0.7));
}

#wheel-svg {
  display: block;
  transition: none;
}

.roulette-result {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.25rem);
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
  min-height: 2.5rem;
  color: var(--cream-dim);
  font-style: italic;
  transition: opacity 0.4s;
}

.roulette-result.success { color: #6ecf99; }
.roulette-result.danger  { color: #e87070; }

.roulette-btn { margin-top: 0.5rem; }

/* Roulette tray — fixed at bottom, same as question tray */
.card-tray-roulette {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg-card);
  border-top: 1px solid rgba(201,168,76,0.2);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}

/* ── Spin animation state classes ─────────────────────────────────────── */
.wheel-spinning #wheel-svg {
  filter: blur(0.5px);
}

/* ═══════════════════════════════════════════════════════════
   SLOT MACHINE SCREEN
   ═══════════════════════════════════════════════════════════ */
#screen-slot {
  justify-content: flex-start;
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% 25%, #120e06, transparent);
  overflow: hidden;
}

.slot-screen-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1rem 180px;
  gap: 0.875rem;
  width: 100%;
}

.slot-stage-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
}

.slot-question {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 4vw, 1.15rem);
  font-style: italic;
  color: var(--cream-dim);
  text-align: center;
  max-width: 300px;
  line-height: 1.4;
  margin: 0;
}

/* ── Slot window ─────────────────────────────────────────── */
.slot-window {
  position: relative;
  width: min(300px, calc(100vw - 48px));
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid rgba(201,168,76,0.25);
  box-shadow: 0 12px 50px rgba(0,0,0,0.7), inset 0 0 60px rgba(0,0,0,0.3);
}

/* Gold highlight lines at center card edges */
.slot-highlight-top,
.slot-highlight-bot {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 12px rgba(201,168,76,0.5);
  z-index: 10;
  pointer-events: none;
}
.slot-highlight-top { top: 80px; }   /* = PEEK */
.slot-highlight-bot { bottom: 80px; }

/* Fade overlay: dims cards above/below center */
.slot-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14,13,11,0.85) 0%,
    transparent 30%,
    transparent 70%,
    rgba(14,13,11,0.85) 100%
  );
  z-index: 9;
  pointer-events: none;
}

/* ── Strip ───────────────────────────────────────────────── */
.slot-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* ── Individual slot card ────────────────────────────────── */
.slot-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  gap: 0.35rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  position: relative;
}

.slot-card-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,232,213,0.55);
  font-weight: 500;
}

.slot-card-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2px solid rgba(201,168,76,0.3);
  background: rgba(0,0,0,0.3);
}

.slot-card-img-ph {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(201,168,76,0.1);
  border: 2px solid rgba(201,168,76,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--gold-dim);
}

.slot-card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.2;
}

.slot-card-bio {
  font-size: 0.75rem;
  color: var(--cream-dim);
  line-height: 1.4;
  max-width: 240px;
}

/* Safe card */
.slot-card-safe {
  background: #1a3a22 !important;
}
.slot-safe-icon {
  font-size: 2rem;
  color: #6ecf99;
  line-height: 1;
}
.slot-safe-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #a8e6c8;
}
.slot-safe-sub {
  font-size: 0.8rem;
  color: rgba(168,230,200,0.7);
  font-style: italic;
}

/* ── Result text ─────────────────────────────────────────── */
.slot-result {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  font-style: italic;
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
  min-height: 2rem;
  color: var(--cream-dim);
  transition: opacity 0.4s;
}
.slot-result-safe   { color: #6ecf99; }
.slot-result-danger { color: #e87070; }

.slot-action-btn { max-width: 280px; }

/* Card tray on slot screen */
.card-tray-slot {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg-card);
  border-top: 1px solid rgba(201,168,76,0.2);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}

/* ── Challenge screen (cleaned up) ──────────────────────── */
.challenge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.25rem 2rem;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  min-height: 100dvh;
  justify-content: center;
}
.challenge-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--red-accent);
  color: #ffaaaa;
  font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 28px rgba(139,32,32,0.5);
}
.challenge-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  font-weight: 700;
  color: var(--cream);
  text-align: center;
}
.challenge-narrative {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  font-style: italic;
  color: #e8a0a0;
  line-height: 1.6;
  text-align: center;
  max-width: 360px;
}
.challenge-figure-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.btn-add {
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(201,168,76,0.3); }
  50%      { box-shadow: 0 4px 40px rgba(201,168,76,0.6); }
}

/* ═══════════════════════════════════════════════════════════
   SLOT MACHINE SCREEN  v3
   ═══════════════════════════════════════════════════════════ */

/* Frame width shared between CSS and JS via custom property */
:root {
  --slot-fw: min(280px, calc(100vw - 40px));
}

#screen-slot {
  justify-content: flex-start;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  background-image: radial-gradient(ellipse 90% 60% at 50% 20%, #15100a, transparent);
}

.slot-screen-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* bottom padding = card-tray height */
  padding: 0.75rem 0.75rem 60px;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slot-labels { text-align: center; }

.slot-stage-label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
}

.slot-question {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  font-style: italic;
  color: var(--cream-dim);
  margin: 0.3rem 0 0;
  line-height: 1.4;
}

/* ── Arabic-style slot frame ─────────────────────────────── */

/* Frame animations */
@keyframes cornerBlink {
  0%, 70%, 100% { opacity: 0.75; filter: none; }
  35% {
    opacity: 1;
    filter: drop-shadow(0 0 6px #c9a84c) drop-shadow(0 0 14px rgba(201,168,76,0.5));
  }
}
@keyframes travelH {
  from { background-position: -80% center; }
  to   { background-position: 180% center; }
}
@keyframes travelV {
  from { background-position: center -80%; }
  to   { background-position: center 180%; }
}
@keyframes archPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 12px rgba(201,168,76,0.6); }
}
@keyframes frameAmbient {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px #c9a84c,
      inset 0 0 0 4px #0a0906,
      inset 0 0 0 6px rgba(201,168,76,0.35),
      inset 0 0 0 8px #0a0906,
      inset 0 0 0 9px rgba(201,168,76,0.15),
      0 30px 80px rgba(0,0,0,0.85),
      0 0 0 1px rgba(201,168,76,0.2);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px #e8c97a,
      inset 0 0 0 4px #0a0906,
      inset 0 0 0 6px rgba(201,168,76,0.55),
      inset 0 0 0 8px #0a0906,
      inset 0 0 0 9px rgba(201,168,76,0.25),
      0 30px 80px rgba(0,0,0,0.85),
      0 0 20px rgba(201,168,76,0.15),
      0 0 0 1px rgba(201,168,76,0.4);
  }
}

.slot-machine-frame {
  position: relative;
  /* Width: smaller of 280px or viewport minus margins */
  width: var(--slot-fw);
  /* Height: maintain ~1:2.1 ratio but never overflow available vertical space */
  /* Available = 100dvh - labels≈50px - bottom≈110px - tray≈52px - gaps≈28px = dvh-240 */
  height: min(
    calc(var(--slot-fw) * 2.1),
    calc(100dvh - 240px)
  );
  flex-shrink: 0;
  background: linear-gradient(160deg, #1a130a 0%, #0a0906 100%);
  border-radius: 6px;
  padding: 26px 14px;
  box-sizing: border-box;
  /* Flex so slot-window-outer fills the interior */
  display: flex;
  flex-direction: column;

  animation: frameAmbient 5s ease-in-out infinite;
}

/* Corner ornaments — 8-pointed Islamic stars via CSS */
.frame-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 20;
}
.frame-corner::before,
.frame-corner::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 4px; left: 4px;
  background: var(--gold);
}
.frame-corner::before { transform: rotate(0deg); }
.frame-corner::after  { transform: rotate(45deg); opacity: 0.75; }

.frame-tl { top: 6px; left: 6px;  animation: cornerBlink 4s ease-in-out infinite 0s; }
.frame-tr { top: 6px; right: 6px; animation: cornerBlink 4s ease-in-out infinite 1s; }
.frame-br { bottom: 6px; right: 6px; animation: cornerBlink 4s ease-in-out infinite 2s; }
.frame-bl { bottom: 6px; left: 6px;  animation: cornerBlink 4s ease-in-out infinite 3s; }

/* Horizontal gold rule lines with traveling light */
.frame-border-h {
  position: absolute;
  left: 30px; right: 30px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, transparent 20%,
    var(--gold) 50%,
    transparent 80%, transparent 100%
  );
  background-size: 80% 100%;
  background-repeat: no-repeat;
}
.frame-border-t1 { top: 14px;  animation: travelH 2.8s ease-in-out infinite alternate 0s; }
.frame-border-t2 { top: 18px;  opacity: 0.35; animation: travelH 2.8s ease-in-out infinite alternate-reverse 0s; }
.frame-border-b1 { bottom: 14px; animation: travelH 2.8s ease-in-out infinite alternate 1.4s; }
.frame-border-b2 { bottom: 18px; opacity: 0.35; animation: travelH 2.8s ease-in-out infinite alternate-reverse 1.4s; }

/* Vertical gold rule lines with traveling light */
.frame-border-v {
  position: absolute;
  top: 30px; bottom: 30px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%, transparent 20%,
    var(--gold) 50%,
    transparent 80%, transparent 100%
  );
  background-size: 100% 80%;
  background-repeat: no-repeat;
}
.frame-border-r1 { right: 6px;  animation: travelV 2.8s ease-in-out infinite alternate 0.7s; }
.frame-border-r2 { right: 10px; opacity: 0.35; animation: travelV 2.8s ease-in-out infinite alternate-reverse 0.7s; }
.frame-border-l1 { left: 6px;   animation: travelV 2.8s ease-in-out infinite alternate 2.1s; }
.frame-border-l2 { left: 10px;  opacity: 0.35; animation: travelV 2.8s ease-in-out infinite alternate-reverse 2.1s; }

/* Pointed arch shapes at top and bottom */
.frame-arch-top,
.frame-arch-bot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 10px;
  z-index: 5;
}
.frame-arch-top {
  top: -2px;
  background: #0a0906;
  border-bottom: 2px solid var(--gold);
  border-radius: 0 0 30px 30px;
  animation: archPulse 5s ease-in-out infinite 0s;
}
.frame-arch-bot {
  bottom: -2px;
  background: #0a0906;
  border-top: 2px solid var(--gold);
  border-radius: 30px 30px 0 0;
  animation: archPulse 5s ease-in-out infinite 2.5s;
}

/* ── Slot window (overflow:hidden viewport) ──────────────── */
.slot-window-outer {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  /* Inner shadow to simulate depth inside the machine */
  box-shadow:
    inset 0 8px 20px rgba(0,0,0,0.7),
    inset 0 -8px 20px rgba(0,0,0,0.7);
}

.slot-window {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* height set by JS */
  background: #060504;
}

/* ── Strip ───────────────────────────────────────────────── */
.slot-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translateY(0);
}

/* ── Individual card ─────────────────────────────────────── */
.slot-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 12px;
  gap: 4px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  /* height set by JS */
}

.sc-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240,232,213,0.45);
  font-weight: 500;
  line-height: 1;
}

.sc-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid rgba(201,168,76,0.35);
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.sc-img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--gold-dim);
}

.sc-name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.1;
}

.sc-years {
  font-size: 0.68rem;
  color: var(--text-dim);
}

.sc-challenge {
  font-size: 0.7rem;
  color: rgba(240,232,213,0.6);
  line-height: 1.4;
  max-width: 220px;
  font-style: italic;
  margin-top: 2px;
  /* Clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Safe card */
.slot-card-safe { background: #0d2a15 !important; }
.sc-safe-icon  { font-size: 2.2rem; color: #6ecf99; line-height: 1; }
.sc-safe-title {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700; color: #a8e6c8;
}
.sc-safe-sub {
  font-size: 0.75rem; color: rgba(168,230,200,0.65); font-style: italic;
}

/* ── Gold highlight lines (absolute, set by JS top/bottom) ─ */
.slot-hl-top,
.slot-hl-bot {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
  box-shadow: 0 0 12px rgba(201,168,76,0.6);
  z-index: 10;
  pointer-events: none;
}

/* ── Fade overlay ────────────────────────────────────────── */
.slot-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,5,4,0.88) 0%,
    rgba(6,5,4,0.2)  22%,
    transparent      35%,
    transparent      65%,
    rgba(6,5,4,0.2)  78%,
    rgba(6,5,4,0.88) 100%
  );
  z-index: 9;
  pointer-events: none;
}

/* ── Bottom action panel ─────────────────────────────────── */
.slot-bottom {
  width: min(280px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-height: 80px;
  transition: opacity 0.4s;
}

.slot-bottom-spinning { opacity: 0.3; pointer-events: none; }
.slot-bottom-lucky    { }
.slot-bottom-challenge{ }
.slot-bottom-added    { }

.slot-bottom-text {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3.5vw, 1.05rem);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--cream-dim);
  margin: 0;
}
.slot-bottom-lucky    .slot-bottom-text { color: #6ecf99; }
.slot-bottom-challenge .slot-bottom-text { color: #e8a0a0; }
.slot-bottom-added    .slot-bottom-text { color: #6ecf99; }

.btn-slot-add, .btn-slot-go {
  max-width: 280px;
  animation: pulse 2s ease infinite;
}
.btn-slot-go { animation: none; }

/* Card tray on slot screen */
.card-tray-slot {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg-card);
  border-top: 1px solid rgba(201,168,76,0.2);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}

/* ── Desktop: wider frame ────────────────────────────────── */
@media (min-width: 600px) {
  :root { --slot-fw: min(320px, calc(100vw - 60px)); }
  .slot-machine-frame { padding: 30px 18px; }
  .frame-corner { width: 34px; height: 34px; }
  .frame-corner::before, .frame-corner::after { width: 24px; height: 24px; }
}

/* ── Read-more toggle on slot cards ─────────────────────── */
.sc-challenge-wrap {
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
}

.sc-challenge {
  font-size: 0.7rem;
  color: rgba(240,232,213,0.62);
  line-height: 1.45;
  font-style: italic;
  text-align: left;
  /* Truncated: 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sc-challenge.sc-challenge-expanded {
  display: block;
  overflow-y: auto;
  max-height: 90px;
  -webkit-line-clamp: unset;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}

.sc-read-more {
  display: block;
  font-size: 0.62rem;
  color: var(--gold);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0 0;
  text-decoration: underline;
  opacity: 0.75;
  font-family: var(--font-body);
  text-align: left;
  transition: opacity 0.2s;
}
.sc-read-more:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   SLOT UI FIXES  v4
   ═══════════════════════════════════════════════════════════ */

/* Viewport-relative font sizes on slot cards */
.sc-name      { font-size: clamp(1rem, 3.5vh, 1.4rem); }
.sc-challenge { font-size: clamp(0.65rem, 1.8vh, 0.85rem); }
.sc-label     { font-size: clamp(0.55rem, 1.4vh, 0.72rem); }
.sc-years     { font-size: clamp(0.6rem,  1.5vh, 0.75rem); }
.sc-safe-title{ font-size: clamp(1rem,    3vh,   1.4rem);  }
.sc-safe-sub  { font-size: clamp(0.7rem,  1.8vh, 0.9rem);  }
.slot-question{ font-size: clamp(0.85rem, 2.2vh, 1.1rem);  }

/* Raised 3D button style for slot bottom buttons */
#btn-slot-add,
#btn-slot-go {
  position: relative;
  border-radius: 8px;
  border: none;
  background: linear-gradient(180deg, #e8c97a 0%, #c9a84c 45%, #a8882c 100%);
  color: #0a0806;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.5vh, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
  /* 3D raised effect */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 4px 0 #7a5e18,
    0 5px 8px rgba(0,0,0,0.5);
  transform: translateY(0);
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}

#btn-slot-add:hover,
#btn-slot-go:hover {
  background: linear-gradient(180deg, #f0d88a 0%, #d9b85c 45%, #b8983c 100%);
}

#btn-slot-add:active,
#btn-slot-go:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 1px 0 #7a5e18,
    0 2px 4px rgba(0,0,0,0.4);
}

/* Slot bottom panel — sits flush against frame like a machine panel */
.slot-bottom {
  width: min(280px, calc(100vw - 40px));
  background: linear-gradient(180deg, #1a120a 0%, #0e0906 100%);
  border: 1px solid rgba(201,168,76,0.3);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.75rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,168,76,0.1);
  min-height: 60px;
}

.slot-machine-frame {
  border-radius: 6px 6px 0 0;   /* flat bottom so panel connects flush */
}

/* ═══════════════════════════════════════════════════════════
   LOCATION SCREEN
   ═══════════════════════════════════════════════════════════ */
#screen-location {
  justify-content: center;
  align-items: center;
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 60% at 50% 30%, #120f08, transparent);
}

.location-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 1.5rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.location-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 700;
  color: var(--cream);
}

.location-sub {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.5;
}

.location-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
}

.location-btn {
  background: var(--bg-elevated);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.85rem 0.75rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.location-btn:hover,
.location-btn.selected {
  background: rgba(201,168,76,0.12);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════════
   SLOT CARD ADDITIONS
   ═══════════════════════════════════════════════════════════ */

/* Bio line below name */
.sc-bio {
  font-size: clamp(0.62rem, 1.6vh, 0.78rem);
  color: rgba(240,232,213,0.55);
  line-height: 1.35;
  font-style: italic;
  text-align: center;
  max-width: 220px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Friends label variant */
.sc-label.friends-label {
  color: rgba(168,230,200,0.6);
}

/* ═══════════════════════════════════════════════════════════
   SPIN BUTTON
   ═══════════════════════════════════════════════════════════ */
#btn-slot-spin {
  font-size: clamp(1rem, 2.8vh, 1.3rem);
  letter-spacing: 0.15em;
  padding: 1rem 2rem;
  background: linear-gradient(180deg, #e8c97a 0%, #c9a84c 45%, #a8882c 100%);
  color: #0a0806;
  border-radius: 8px;
  font-weight: 700;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 4px 0 #7a5e18,
    0 5px 12px rgba(0,0,0,0.5);
  transform: translateY(0);
  transition: transform 0.08s, box-shadow 0.08s;
  animation: spinBtnPulse 2.5s ease-in-out infinite;
}

@keyframes spinBtnPulse {
  0%,100% { box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 -1px 0 rgba(0,0,0,0.4) inset,0 4px 0 #7a5e18,0 5px 12px rgba(0,0,0,0.5); }
  50%     { box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 -1px 0 rgba(0,0,0,0.4) inset,0 4px 0 #7a5e18,0 5px 25px rgba(201,168,76,0.4); }
}

#btn-slot-spin:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 1px 0 #7a5e18,
    0 2px 6px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════════════════════
   END SCREEN — NAME BUBBLES (when no photo)
   ═══════════════════════════════════════════════════════════ */
.figure-card-image-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
  padding: 1rem;
}

.figure-name-bubble {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  color: #0a0806;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(201,168,76,0.3);
}

.figure-bubble-name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-light);
  text-align: center;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════
   SLOT INTRO CARD  (challenge text before spin)
   ═══════════════════════════════════════════════════════════ */
.slot-intro-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(160deg, #1a130a 0%, #0a0906 100%);
  z-index: 5;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.slot-intro-card.intro-exit {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.slot-intro-text {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.8vh, 1.2rem);
  font-style: italic;
  color: var(--cream-dim);
  text-align: center;
  line-height: 1.55;
  max-width: 240px;
}

/* ── Location picker inside slot ─────────────────────────── */
.slot-location-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(160deg, #1a130a 0%, #0a0906 100%);
  z-index: 5;
  overflow-y: auto;
}

.slot-intro-sub {
  font-size: clamp(0.65rem, 1.8vh, 0.8rem);
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  max-width: 220px;
  line-height: 1.4;
}

.slot-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  width: 100%;
}

.slot-loc-btn {
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 6px;
  color: var(--cream-dim);
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 2vh, 0.9rem);
  font-weight: 600;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.slot-loc-btn:hover,
.slot-loc-btn.selected {
  background: rgba(201,168,76,0.18);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ── slot-window-outer needs relative positioning ────────── */
.slot-window-outer { position: relative; }

/* ── slot-bottom hidden state ────────────────────────────── */
.slot-bottom-hidden { opacity: 0; pointer-events: none; }

/* ── Progress bar on slot screen ─────────────────────────── */
#screen-slot .progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.06);
  z-index: 200;
}
#screen-slot .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.6s ease;
  width: 0%;
}

/* ── figure-card personal detail field ──────────────────── */
.figure-card-personal {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════
   ONBOARDING SCREEN
   ═══════════════════════════════════════════════════════════ */
#screen-onboard {
  justify-content: flex-start;
  background: var(--bg);
}

.onboard-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1.25rem 3rem;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.onboard-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  color: var(--cream);
  text-align: center;
}

.onboard-sub {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--cream-dim);
  text-align: center;
  margin-top: -0.75rem;
}

.onboard-section { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; }

.onboard-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
}

.onboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}

.onboard-btn {
  background: var(--bg-elevated);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.65rem 0.5rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.onboard-btn:hover   { border-color: var(--gold-dim); color: var(--gold-light); }
.onboard-btn.selected {
  background: rgba(201,168,76,0.12);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════════
   STAGE 1 — CARD DEAL
   ═══════════════════════════════════════════════════════════ */
#screen-stage1 {
  justify-content: flex-start;
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% 10%, #12100a, transparent);
}

.stage1-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem 2rem;
  width: 100%;
  min-height: 100dvh;
}

.stage1-header { text-align: center; max-width: 420px; }

.stage-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.stage-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 700;
  color: var(--cream);
}

.stage-sub {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--cream-dim);
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* Three-card layout */
.cards-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 460px;
}

@media (min-width: 640px) {
  .cards-area {
    flex-direction: row;
    align-items: flex-start;
  }
}

.deal-card-wrap { flex: 1; }

.deal-card {
  border-radius: var(--radius-card);
  border: 1px solid rgba(201,168,76,0.2);
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition);
}

.deal-card-risk { border-top: 3px solid var(--red-accent); }
.deal-card-safe { border-top: 3px solid var(--green); }
.deal-card.flipped { box-shadow: var(--shadow), 0 0 0 1px rgba(201,168,76,0.3); }

.deal-card-target {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.6rem 1rem 0;
  color: var(--gold-dim);
}

.deal-card-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1rem 0.5rem;
  gap: 0.4rem;
}

.deal-card-emoji { font-size: 2.2rem; line-height: 1; }

.deal-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cream);
  text-align: center;
  line-height: 1.2;
}

.deal-card-reveal {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.deal-card-narrative {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.55;
  margin: 0;
}

.deal-card-saved {
  font-size: 0.85rem;
  color: #6ecf99;
  line-height: 1.5;
  margin: 0;
}

.deal-card-safe-msg {
  font-size: 0.85rem;
  color: #6ecf99;
  font-style: italic;
  margin: 0;
}

/* Figure chip — photo + bio inside the card */
.figure-chip {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 0.65rem;
}

.figure-chip-img,
.figure-chip-ph {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: top;
  background: var(--bg-card);
  border: 1px solid rgba(201,168,76,0.2);
}

.figure-chip-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-dim);
}

.figure-chip-info { flex: 1; min-width: 0; }

.figure-chip-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.2;
}

.figure-chip-bio {
  font-size: 0.78rem;
  color: var(--cream-dim);
  line-height: 1.4;
  margin-top: 0.25rem;
}

.figure-chip-personal {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
  margin-top: 0.2rem;
}

/* Flip and save buttons */
.btn-flip {
  margin: 0 1rem 0.875rem;
  padding: 0.65rem;
  background: var(--bg-elevated);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  width: calc(100% - 2rem);
}
.btn-flip:hover { border-color: var(--gold); background: rgba(201,168,76,0.08); }

.btn-save-figure {
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
}

.btn-saved {
  background: var(--green) !important;
  color: #a8e6c8 !important;
  animation: none !important;
}

/* Stage 1 action bar */
.stage1-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 460px;
  flex-wrap: wrap;
}
.stage1-actions .btn-primary,
.stage1-actions .btn-secondary { flex: 1; }

.stack-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  background: rgba(0,0,0,0.2);
  border-radius: 100px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════
   CARD FLIP MECHANIC
   ═══════════════════════════════════════════════════════════ */

/* The card wrapper has perspective for 3D flip */
.deal-card-wrap {
  flex: 1;
  perspective: 900px;
  min-width: 0;
}

.deal-card {
  position: relative;
  width: 100%;
  min-height: 260px;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.deal-card.flipped {
  transform: rotateY(180deg);
}

.deal-card-back,
.deal-card-front {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Card Back ───────────────────────────────────────────── */
.deal-card-back {
  background: linear-gradient(160deg, #1a1308 0%, #0d0a06 100%);
  border: 1px solid rgba(201,168,76,0.35);
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.875rem;
  /* Subtle pattern */
  background-image:
    linear-gradient(160deg, #1a1308 0%, #0d0a06 100%),
    repeating-linear-gradient(
      45deg,
      rgba(201,168,76,0.03) 0px,
      rgba(201,168,76,0.03) 1px,
      transparent 1px,
      transparent 12px
    );
  background-blend-mode: normal;
}

.card-back-target {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 600;
  align-self: flex-start;
}

.card-back-motif {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
}

.card-back-star {
  font-size: 2.8rem;
  color: var(--gold);
  opacity: 0.7;
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.3));
  line-height: 1;
}

.card-back-text {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-dim);
  text-align: center;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.card-back-tap {
  font-size: 0.65rem;
  color: rgba(201,168,76,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Card Front ──────────────────────────────────────────── */
.deal-card-front {
  transform: rotateY(180deg);
  background: var(--bg-card);
  border: 1px solid rgba(201,168,76,0.18);
  padding: 0.875rem;
  gap: 0.6rem;
  align-items: center;
  text-align: center;
}

.deal-card-risk .deal-card-front { border-top: 3px solid var(--red-accent); }
.deal-card-safe .deal-card-front { border-top: 3px solid var(--green); }

.deal-card-target-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 600;
  align-self: flex-start;
}

.deal-card-emoji { font-size: 2rem; line-height: 1; }

.deal-card-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
}

/* Figure chip — compact, just photo + name */
.card-fig-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-elevated);
  border-radius: 100px;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  border: 1px solid rgba(201,168,76,0.15);
}

.card-fig-img,
.card-fig-ph {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: top;
  background: var(--bg-card);
}

.card-fig-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-dim);
}

.card-fig-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-light);
}

/* Save button on card */
.btn-save-card {
  width: 100%;
  padding: 0.65rem;
  background: linear-gradient(180deg, #e8c97a 0%, #c9a84c 45%, #a8882c 100%);
  color: #0a0806;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 3px 0 #7a5e18, 0 4px 8px rgba(0,0,0,0.4);
  transform: translateY(0);
  transition: transform 0.08s, box-shadow 0.08s;
  margin-top: auto;
}
.btn-save-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #7a5e18, 0 2px 4px rgba(0,0,0,0.3);
}
.btn-save-card.btn-saved {
  background: var(--green);
  color: #a8e6c8;
  box-shadow: none;
}

.card-safe-msg {
  font-size: 0.85rem;
  color: #6ecf99;
  font-style: italic;
  margin-top: auto;
  padding: 0.5rem;
  background: rgba(42,92,63,0.2);
  border-radius: var(--radius);
  width: 100%;
  text-align: center;
}

/* ── Narrative Bar ───────────────────────────────────────── */
.narrative-bar {
  width: 100%;
  max-width: 460px;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: fadeUp 0.35s ease both;
}

.narrative-bar-safe {
  background: rgba(42,92,63,0.2);
  border: 1px solid rgba(42,92,63,0.4);
  color: #6ecf99;
}

.narrative-bar-risk {
  background: rgba(139,32,32,0.15);
  border: 1px solid rgba(139,32,32,0.3);
}

.nb-icon { font-size: 1.1rem; }

.nb-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: #6ecf99;
}

.nb-dealt {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3vw, 1rem);
  font-style: italic;
  color: #e8a0a0;
  line-height: 1.5;
  margin: 0;
}

.nb-saved {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3vw, 1rem);
  color: #6ecf99;
  line-height: 1.5;
  margin: 0;
}

.nb-bio {
  font-size: 0.82rem;
  color: var(--cream-dim);
  line-height: 1.5;
  margin: 0;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.nb-personal {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   TAROT CARD SYSTEM  (no 3D flip — content swaps in place)
   ═══════════════════════════════════════════════════════════ */

.cards-area {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  width: 100%;
  max-width: 520px;
  align-items: flex-start;
  justify-content: center;
}

.tarot-card-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.tarot-card {
  width: 100%;
  aspect-ratio: 2 / 3.2;
  border-radius: var(--radius-card);
  border: 1px solid rgba(201,168,76,0.25);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.2s;
  position: relative;
}

.tarot-card:hover:not(.tarot-flipped) {
  box-shadow: 0 8px 32px rgba(201,168,76,0.25);
  transform: translateY(-3px);
}

.tarot-card.tarot-resolved {
  box-shadow: 0 4px 16px rgba(42,92,63,0.4);
  border-color: rgba(42,92,63,0.5);
}

/* ── Card Back ───────────────────────────────────────────── */
.tarot-back {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #1c1408 0%, #0d0a06 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.5rem;
  /* Subtle diamond pattern */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(201,168,76,0.04) 0px, rgba(201,168,76,0.04) 1px,
      transparent 1px, transparent 14px
    ),
    linear-gradient(160deg, #1c1408 0%, #0d0a06 100%);
}

.tarot-back-label {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 600;
}

.tarot-back-star {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  color: var(--gold);
  opacity: 0.65;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.3));
  line-height: 1;
}

.tarot-back-sub {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.8vw, 0.72rem);
  color: rgba(201,168,76,0.45);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.tarot-back-hint {
  font-size: 0.55rem;
  color: rgba(201,168,76,0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Card Front ──────────────────────────────────────────── */
.tarot-front {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.5rem;
  gap: 0.3rem;
  text-align: center;
}

.tarot-front-risk {
  background: linear-gradient(180deg, #1a0808 0%, #0d0606 100%);
  border-top: 2px solid var(--red-accent);
}

.tarot-front-safe {
  background: linear-gradient(180deg, #081a0e 0%, #060d08 100%);
  border-top: 2px solid var(--green);
}

.tarot-target {
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 600;
  align-self: flex-start;
}

.tarot-emoji {
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1;
  flex-shrink: 0;
}

.tarot-title {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2.8vw, 1rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
}

.tarot-fig-wrap {
  flex-shrink: 0;
}

.tarot-fig-img,
.tarot-fig-ph {
  width: clamp(36px, 10vw, 54px);
  height: clamp(36px, 10vw, 54px);
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 1px solid rgba(201,168,76,0.3);
  background: var(--bg-card);
  display: block;
  margin: 0 auto;
}

.tarot-fig-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-dim);
}

.tarot-fig-name {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 2.2vw, 0.85rem);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.2;
  margin-top: 0.2rem;
}

.tarot-save-btn {
  width: 100%;
  padding: 0.45rem 0.3rem;
  background: linear-gradient(180deg, #e8c97a 0%, #c9a84c 50%, #a8882c 100%);
  color: #0a0806;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 2vw, 0.8rem);
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 0 #7a5e18;
  transition: transform 0.08s, box-shadow 0.08s;
  line-height: 1.2;
  margin-top: auto;
}
.tarot-save-btn:active { transform: translateY(2px); box-shadow: none; }
.tarot-save-btn.tarot-saved {
  background: var(--green);
  color: #a8e6c8;
  box-shadow: none;
}

.tarot-safe-badge {
  font-size: clamp(0.6rem, 2vw, 0.78rem);
  color: #6ecf99;
  font-style: italic;
  margin-top: auto;
  padding: 0.35rem;
  background: rgba(42,92,63,0.25);
  border-radius: 6px;
  width: 100%;
  text-align: center;
  line-height: 1.3;
}

/* Target label below card */
.tarot-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  text-align: center;
}

/* ── Narrative area ──────────────────────────────────────── */
.narrative-area {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nar-entry {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  animation: fadeUp 0.4s ease both;
}

.nar-safe {
  background: rgba(42,92,63,0.18);
  border: 1px solid rgba(42,92,63,0.35);
}

.nar-risk {
  background: rgba(139,32,32,0.12);
  border: 1px solid rgba(139,32,32,0.25);
}

.nar-icon { font-size: 1.1rem; }

.nar-dealt {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: #e8a0a0;
  line-height: 1.55;
  margin: 0;
}

.nar-saved {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #6ecf99;
  line-height: 1.55;
  margin: 0;
}

.nar-bio {
  font-size: 0.82rem;
  color: var(--cream-dim);
  line-height: 1.5;
  margin: 0;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.nar-personal {
  font-size: 0.76rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}

.nar-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: #6ecf99;
  margin: 0;
}

/* ── Stage 1 action buttons ──────────────────────────────── */
.stage1-continue {
  max-width: 340px;
  animation: fadeUp 0.4s ease both;
}

.stage1-deal-again {
  max-width: 200px;
  margin-top: 0.5rem;
}

.stack-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  background: rgba(0,0,0,0.2);
  border-radius: 100px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.5rem;
}