/* Arcanum Speculum · Ritual Edition */
:root {
  --void: #070512;
  --void-2: #0d0920;
  --panel: rgba(14, 10, 30, .82);
  --panel-2: rgba(20, 14, 42, .92);
  --purple: #6d4aff;
  --purple-soft: #a98cff;
  --purple-deep: #352078;
  --gold: #d8b56a;
  --gold-bright: #f0d48b;
  --gold-dim: #866d3e;
  --silver: #d9d4e9;
  --muted: #8d879e;
  --text: #eee9f7;
  --danger: #c77b98;
  --card-shadow: 0 20px 55px rgba(0,0,0,.58);
  --serif: "Noto Serif SC", "Songti SC", serif;
  --display: "Cinzel", "Noto Serif SC", serif;
  --body: "Cormorant Garamond", "Noto Serif SC", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  color: var(--text); background: var(--void);
  font-family: var(--serif); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
button, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 4px; }
.hidden { display: none !important; }

/* ===== Cosmic background ===== */
.cosmos { position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; background:
  radial-gradient(circle at 50% 20%, rgba(70, 42, 140, .20), transparent 30%),
  radial-gradient(circle at 20% 80%, rgba(44, 20, 96, .20), transparent 35%),
  linear-gradient(180deg, #05030c 0%, #090616 48%, #04030a 100%); }
.cosmos__nebula { position:absolute; inset:-20%; background:
  radial-gradient(ellipse at 25% 25%, rgba(106,74,255,.16), transparent 24%),
  radial-gradient(ellipse at 78% 58%, rgba(137,94,255,.10), transparent 28%),
  radial-gradient(ellipse at 48% 90%, rgba(78,42,146,.12), transparent 25%); filter: blur(18px); animation: nebulaDrift 22s ease-in-out infinite alternate; }
.cosmos__stars { position:absolute; inset:0; background-image: radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.5px); background-size: 160px 160px; opacity:.22; }
.cosmos__stars--near { background-size: 260px 260px; transform: translate(20px, 30px); opacity:.15; animation: starDrift 35s linear infinite; }
.cosmos__glow { position:absolute; left:50%; top:44%; width:55vmin; height:55vmin; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(109,74,255,.09), transparent 68%); filter: blur(12px); animation: breathingGlow 6s ease-in-out infinite; }
#particleCanvas { position:absolute; inset:0; width:100%; height:100%; opacity:.8; }
.runes { position:absolute; inset:0; overflow:hidden; }
.rune { position:absolute; top:110%; color:rgba(216,181,106,.18); font-family:var(--display); font-size:var(--size); animation: runeFloat var(--duration) linear var(--delay) infinite; text-shadow:0 0 16px rgba(109,74,255,.5); }
.cursor-aura { position:fixed; left:0; top:0; width:220px; height:220px; margin:-110px; border-radius:50%; pointer-events:none; z-index:20; background:radial-gradient(circle, rgba(109,74,255,.12), transparent 66%); filter:blur(3px); mix-blend-mode:screen; transition:transform .12s ease-out; }

/* ===== Intro ===== */
.intro-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; opacity:0; pointer-events:none; background:#04020a; transition:opacity .7s ease; }
.intro-screen.is-visible { opacity:1; pointer-events:auto; }
.intro-screen.is-fading { opacity:0; }
.intro-screen__veil { position:absolute; inset:0; background:radial-gradient(circle, rgba(109,74,255,.12), transparent 38%), radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,.82) 78%); }
.intro-screen__copy { position:relative; z-index:2; text-align:center; transform:translateY(18px); animation:introCopy 1.4s .15s ease-out forwards; opacity:0; }
.intro-screen__copy .eyebrow, .stage-eyebrow, .panel-heading__eyebrow { display:block; color:var(--gold); font-family:var(--display); font-size:.68rem; letter-spacing:.35em; }
.intro-screen__copy h1 { margin:12px 0 4px; font-family:var(--serif); font-size:clamp(2.2rem, 8vw, 4rem); font-weight:500; letter-spacing:.24em; text-shadow:0 0 35px rgba(169,140,255,.42); }
.intro-screen__copy p { margin:0; color:var(--muted); font-family:var(--body); font-style:italic; font-size:1.05rem; }
.magic-sigil { position:relative; display:grid; place-items:center; border-radius:50%; }
.magic-sigil--hero { position:absolute; left:50%; top:50%; width:min(66vmin,460px); aspect-ratio:1; transform:translate(-50%,-56%); opacity:.8; animation:sigilAppear 1.8s ease-out forwards; }
.magic-sigil--small { width:74px; height:74px; margin:0 auto 24px; }
.sigil-ring { position:absolute; inset:0; border:1px solid rgba(216,181,106,.55); border-radius:50%; }
.sigil-ring--outer { inset:-15%; border-color:rgba(109,74,255,.28); border-style:dashed; animation:spin 36s linear infinite; }
.sigil-ring--mid { inset:3%; border-color:rgba(216,181,106,.38); animation:spinReverse 22s linear infinite; }
.sigil-ring--inner { inset:20%; border-color:rgba(169,140,255,.48); border-style:dashed; animation:spin 15s linear infinite; }
.magic-sigil--hero::before, .magic-sigil--hero::after { content:"✦  ◇  ✧  ◇  ✦  ◇  ✧  ◇"; position:absolute; inset:10%; display:grid; place-items:center; color:rgba(216,181,106,.4); font-size:clamp(.55rem,1.2vw,.8rem); letter-spacing:1.2em; transform:rotate(22deg); }
.magic-sigil--hero::after { transform:rotate(-22deg); color:rgba(169,140,255,.28); }
.sigil-star { color:var(--gold-bright); font-size:2rem; text-shadow:0 0 25px rgba(240,212,139,.65); animation:starPulse 3s ease-in-out infinite; }

/* ===== Header ===== */
.masthead { width:min(1120px, calc(100% - 36px)); margin:0 auto; padding:36px 0 18px; text-align:center; }
.masthead__line { display:flex; align-items:center; gap:12px; justify-content:center; color:var(--gold); opacity:.7; }
.masthead__line span { height:1px; flex:1; max-width:230px; background:linear-gradient(90deg, transparent, rgba(216,181,106,.55)); }
.masthead__line span:last-child { transform:scaleX(-1); }
.masthead__line i { font-style:normal; font-size:.7rem; }
.brand-mark { padding:8px 20px 14px; }
.brand-mark__roman, .brand-mark__sub { display:block; font-family:var(--display); color:var(--gold); letter-spacing:.34em; font-size:.62rem; }
.brand-mark h1 { margin:4px 0 3px; font-family:var(--serif); font-size:clamp(2rem, 5vw, 3.3rem); font-weight:500; letter-spacing:.26em; text-shadow:0 0 30px rgba(109,74,255,.32); }
.brand-mark__sub { color:rgba(217,212,233,.5); font-size:.52rem; letter-spacing:.2em; }

/* ===== Shell / progress ===== */
.app-shell { width:min(1120px, calc(100% - 28px)); margin:0 auto; padding-bottom:100px; }
.ritual-progress { display:flex; align-items:center; justify-content:center; gap:9px; margin:8px auto 28px; max-width:760px; color:var(--muted); }
.ritual-progress__item { display:flex; align-items:center; gap:7px; font-family:var(--display); font-size:.58rem; letter-spacing:.12em; opacity:.5; transition:.35s ease; }
.ritual-progress__item span { display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(216,181,106,.25); border-radius:50%; }
.ritual-progress__item.is-active, .ritual-progress__item.is-complete { color:var(--gold); opacity:1; }
.ritual-progress__item.is-active span { border-color:var(--gold); box-shadow:0 0 15px rgba(216,181,106,.22); }
.ritual-progress__line { width:clamp(16px,5vw,56px); height:1px; background:linear-gradient(90deg, rgba(216,181,106,.12), rgba(216,181,106,.38), rgba(216,181,106,.12)); }

/* ===== Setup ===== */
.panel { position:relative; overflow:hidden; background:linear-gradient(145deg, rgba(17,12,37,.88), rgba(8,6,19,.94)); border:1px solid rgba(216,181,106,.25); box-shadow:var(--card-shadow), inset 0 0 80px rgba(109,74,255,.045); }
.setup-panel { padding:clamp(28px,5vw,58px); border-radius:20px; }
.setup-panel::before { content:""; position:absolute; inset:10px; border:1px solid rgba(169,140,255,.08); border-radius:14px; pointer-events:none; }
.panel__halo { position:absolute; width:420px; height:420px; left:50%; top:44%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(109,74,255,.09), transparent 68%); pointer-events:none; }
.panel-heading { position:relative; max-width:720px; margin:0 auto 30px; text-align:center; }
.panel-heading h2 { margin:9px 0 5px; font-size:clamp(1.35rem,4vw,2rem); font-weight:500; letter-spacing:.1em; }
.panel-heading p { margin:0 auto; color:var(--muted); font-family:var(--body); font-size:1rem; }
.question-field { position:relative; display:block; max-width:780px; margin:0 auto 34px; }
.question-field::before { content:""; position:absolute; inset:-1px; border-radius:13px; background:linear-gradient(120deg, rgba(216,181,106,.32), transparent 25%, transparent 75%, rgba(109,74,255,.32)); z-index:0; }
.question-field textarea { position:relative; z-index:1; display:block; width:100%; min-height:142px; resize:vertical; border:1px solid rgba(216,181,106,.18); border-radius:12px; padding:24px 50px 34px 24px; color:var(--text); background:rgba(6,4,16,.78); font-family:var(--serif); font-size:1.05rem; line-height:1.9; box-shadow:inset 0 0 35px rgba(0,0,0,.35); transition:.3s ease; }
.question-field textarea::placeholder { color:rgba(217,212,233,.32); }
.question-field textarea:focus { border-color:rgba(216,181,106,.62); box-shadow:0 0 30px rgba(109,74,255,.12), inset 0 0 35px rgba(0,0,0,.35); }
.question-field__ornament { position:absolute; z-index:2; top:16px; right:20px; color:var(--gold); opacity:.55; }
.question-field__counter { position:absolute; z-index:2; right:18px; bottom:12px; color:rgba(217,212,233,.35); font-family:var(--display); font-size:.55rem; letter-spacing:.08em; }
.question-field__counter b { color:var(--gold); font-weight:500; }
.spread-picker { position:relative; border:0; margin:0; padding:0; }
.spread-picker legend { margin:0 auto 14px; color:var(--gold); font-family:var(--display); font-size:.65rem; letter-spacing:.28em; text-align:center; }
.spread-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:880px; margin:auto; }
.spread-option { position:relative; display:flex; align-items:center; gap:15px; min-height:116px; padding:18px; color:var(--text); text-align:left; border:1px solid rgba(216,181,106,.15); border-radius:14px; background:linear-gradient(145deg, rgba(25,18,52,.75), rgba(8,6,20,.78)); transition:.35s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.spread-option::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(109,74,255,.16), transparent 50%); opacity:0; transition:.35s; }
.spread-option:hover { transform:translateY(-3px); border-color:rgba(216,181,106,.45); box-shadow:0 12px 35px rgba(0,0,0,.35), 0 0 22px rgba(109,74,255,.1); }
.spread-option:hover::before, .spread-option.is-selected::before { opacity:1; }
.spread-option.is-selected { border-color:rgba(216,181,106,.72); box-shadow:0 0 0 1px rgba(216,181,106,.16), 0 12px 38px rgba(0,0,0,.4), 0 0 26px rgba(109,74,255,.12); }
.spread-option__sigil { position:relative; z-index:1; display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border:1px solid rgba(216,181,106,.3); border-radius:50%; color:var(--gold-bright); font-size:1rem; box-shadow:inset 0 0 18px rgba(109,74,255,.12); }
.spread-option__body { position:relative; z-index:1; min-width:0; }
.spread-option__en { display:block; color:rgba(169,140,255,.7); font-family:var(--display); font-size:.48rem; letter-spacing:.18em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spread-option strong { display:block; margin:2px 0; color:var(--gold-bright); font-weight:500; font-size:.95rem; letter-spacing:.08em; }
.spread-option small { display:block; color:var(--muted); font-family:var(--body); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spread-option__check { position:absolute; right:14px; top:14px; color:var(--gold); font-family:var(--display); font-size:.7rem; opacity:0; transform:scale(.6); transition:.3s; }
.spread-option.is-selected .spread-option__check { opacity:1; transform:scale(1); }
.setup-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; max-width:880px; margin:30px auto 0; padding-top:22px; border-top:1px solid rgba(216,181,106,.12); }
.ritual-note { display:flex; align-items:center; gap:10px; color:var(--muted); font-family:var(--body); font-style:italic; }
.ritual-note__icon { color:var(--gold); }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:50px; padding:0 24px; border:1px solid rgba(216,181,106,.65); border-radius:999px; color:#0a0714; background:linear-gradient(135deg, var(--gold-bright), var(--gold)); font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.18em; box-shadow:0 0 24px rgba(216,181,106,.16), 0 8px 24px rgba(0,0,0,.35); transition:.3s ease; }
.primary-button:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 0 32px rgba(216,181,106,.28), 0 12px 30px rgba(0,0,0,.42); }
.primary-button:disabled { opacity:.3; cursor:not-allowed; filter:grayscale(.6); }
.primary-button__sigil { font-size:.8rem; }
.primary-button__arrow { font-size:1rem; opacity:.7; }
.text-button { border:0; background:transparent; color:var(--muted); font-family:var(--body); font-style:italic; transition:.25s; }
.text-button:hover { color:var(--gold); }
.setup-panel.is-exiting { animation:panelExit .55s ease forwards; }

/* ===== Ritual table ===== */
.ritual-stage { position:relative; animation:stageIn .7s ease-out; }
.ritual-stage__header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:0 0 14px; padding:0 8px; }
.stage-eyebrow { margin-bottom:3px; }
.ritual-stage__header h2 { margin:0; font-size:1.5rem; font-weight:500; letter-spacing:.12em; }
.ritual-state { display:flex; align-items:center; gap:8px; color:var(--gold); font-family:var(--display); font-size:.58rem; letter-spacing:.12em; }
.ritual-state__dot { width:7px; height:7px; border-radius:50%; background:var(--purple-soft); box-shadow:0 0 12px rgba(169,140,255,.8); animation:statusPulse 1.8s infinite; }
.ritual-state.is-done .ritual-state__dot { background:var(--gold); box-shadow:0 0 12px rgba(216,181,106,.8); }
.ritual-table { position:relative; min-height:700px; padding:30px 28px 32px; overflow:hidden; border:1px solid rgba(216,181,106,.28); border-radius:20px; background:
  radial-gradient(circle at 50% 48%, rgba(109,74,255,.10), transparent 32%),
  radial-gradient(circle at 50% 100%, rgba(216,181,106,.05), transparent 35%),
  linear-gradient(145deg, rgba(11,8,27,.97), rgba(5,4,13,.98));
  box-shadow:var(--card-shadow), inset 0 0 90px rgba(109,74,255,.06); }
.ritual-table::before { content:""; position:absolute; inset:12px; border:1px solid rgba(216,181,106,.08); border-radius:13px; pointer-events:none; }
.ritual-stage__ambient { position:fixed; left:50%; top:50%; width:70vmin; height:70vmin; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(109,74,255,.08), transparent 68%); pointer-events:none; z-index:-1; }
.table-aura { position:absolute; left:50%; top:46%; width:min(62vw,620px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(109,74,255,.11), transparent 62%); filter:blur(8px); animation:breathingGlow 5s ease-in-out infinite; }
.magic-circle--table { position:absolute; left:50%; top:43%; width:min(66vw,620px); aspect-ratio:1; transform:translate(-50%,-50%); opacity:.52; pointer-events:none; }
.circle-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(216,181,106,.18); }
.circle-ring--1 { inset:2%; border-style:dashed; animation:spin 42s linear infinite; }
.circle-ring--2 { inset:10%; border-color:rgba(109,74,255,.2); animation:spinReverse 28s linear infinite; }
.circle-ring--3 { inset:21%; border-style:dashed; animation:spin 20s linear infinite; }
.circle-ring--4 { inset:34%; border-color:rgba(216,181,106,.22); }
.circle-symbol { position:absolute; inset:0; display:grid; place-items:center; color:rgba(216,181,106,.45); font-size:1.4rem; text-shadow:0 0 20px rgba(216,181,106,.55); }
.spread-area { position:relative; z-index:2; min-height:390px; display:flex; align-items:center; justify-content:center; padding-bottom:30px; }
.spread-area.single .slot { width:165px; aspect-ratio:2/3.2; }
.spread-area.three { width:min(760px,100%); display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.spread-area.three .slot { aspect-ratio:2/3.2; }
.spread-area.celtic { width:100%; min-height:520px; }
.celtic-layout { display:grid; grid-template-columns:1fr 1.35fr 1fr 1fr; align-items:center; gap:22px; width:min(930px,100%); }
.celtic-cross { position:relative; height:260px; }
.celtic-cross .slot:first-child { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.celtic-cross .slot:nth-child(2) { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(90deg); }
.celtic-cross .slot { width:112px; aspect-ratio:2/3.2; }
.celtic-root { display:flex; flex-direction:column; gap:14px; }
.celtic-column { display:flex; flex-direction:column; gap:14px; }
.celtic-column--left { margin-top:-40px; }
.celtic-column--right { margin-top:40px; }
.celtic-root .slot, .celtic-column .slot { width:100%; aspect-ratio:2/3.2; }

/* ===== Slots / cards ===== */
.slot { position:relative; display:flex; align-items:center; justify-content:center; border:1px dashed rgba(216,181,106,.22); border-radius:10px; background:rgba(5,4,14,.25); box-shadow:inset 0 0 30px rgba(109,74,255,.025); transition:.5s ease; }
.slot::before { content:""; position:absolute; inset:7px; border:1px solid rgba(169,140,255,.06); border-radius:7px; }
.slot__glyph { color:rgba(216,181,106,.38); font-size:1rem; animation:starPulse 3s ease-in-out infinite; }
.slot-num { position:absolute; left:8px; top:-10px; z-index:6; padding:1px 6px; border:1px solid rgba(216,181,106,.32); border-radius:4px; color:var(--gold); background:#0a0715; font-family:var(--display); font-size:.5rem; letter-spacing:.12em; }
.slot-label { position:absolute; left:0; right:0; bottom:-25px; text-align:center; color:rgba(216,181,106,.7); font-family:var(--display); font-size:.54rem; letter-spacing:.18em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-empty { color:rgba(169,140,255,.28); font-family:var(--body); font-style:italic; font-size:.75rem; }
.slot.occupied { border-style:solid; border-color:rgba(216,181,106,.55); box-shadow:0 0 24px rgba(216,181,106,.14), inset 0 0 22px rgba(109,74,255,.08); }
.slot.is-revealing { animation:slotReveal .8s ease; }
.slot-card { cursor:default !important; }
.card { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .95s cubic-bezier(.2,.78,.2,1); border-radius:8px; }
.card.flipped { transform:rotateY(180deg); }
.card-face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:8px; }
.card-face.back { display:grid; place-items:center; color:var(--gold); background:
  radial-gradient(circle at 50% 50%, rgba(109,74,255,.22), transparent 30%),
  repeating-conic-gradient(from 0deg, rgba(216,181,106,.08) 0 5deg, transparent 5deg 12deg),
  linear-gradient(145deg, #15102c, #07050f); border:1px solid rgba(216,181,106,.65); box-shadow:inset 0 0 25px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.45); }
.back__ring { position:absolute; border-radius:50%; border:1px solid rgba(216,181,106,.45); }
.back__ring--1 { inset:10%; transform:rotate(45deg); }
.back__ring--2 { inset:23%; border-style:dashed; transform:rotate(-20deg); }
.back__sigil { position:relative; z-index:2; font-size:1.8rem; text-shadow:0 0 15px rgba(216,181,106,.65); animation:starPulse 2.8s ease-in-out infinite; }
.back__runes { position:absolute; bottom:8%; left:0; right:0; text-align:center; color:rgba(216,181,106,.45); font-family:var(--display); font-size:.4rem; letter-spacing:.16em; }
.card-face.front { transform:rotateY(180deg); border:1px solid rgba(216,181,106,.7); background:#0d0a17; }
.card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.92) contrast(1.06) saturate(.9); }
.card-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,2,10,.08) 30%, rgba(4,2,10,.86) 100%); }
.card-text { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 7px 8px; text-align:center; }
.card-text .numeral { color:var(--gold-bright); font-family:var(--display); font-size:.5rem; letter-spacing:.28em; }
.card-text .name { color:#fff4d4; font-family:var(--serif); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-shadow:0 2px 5px #000; }
.card-text .en { color:rgba(216,181,106,.75); font-family:var(--body); font-style:italic; font-size:.45rem; }
.card-text .orientation { margin-top:3px; color:rgba(169,140,255,.85); font-family:var(--display); font-size:.39rem; letter-spacing:.08em; }
.card-text .keywords { margin-top:3px; color:rgba(238,233,247,.7); font-size:.39rem; line-height:1.3; }
.front.is-reversed .card-img, .front.is-reversed .card-overlay, .front.is-reversed .card-text { transform:rotate(180deg); }
.front.is-reversed .card-text { transform-origin:center; }

/* ===== Deck ===== */
.draw-progress { position:relative; z-index:3; width:min(680px,90%); margin:6px auto 22px; }
.draw-progress__label { display:flex; justify-content:space-between; color:var(--gold); font-family:var(--display); font-size:.55rem; letter-spacing:.15em; }
.draw-progress__track { height:2px; margin-top:7px; background:rgba(216,181,106,.12); overflow:hidden; }
.draw-progress__track span { display:block; width:0; height:100%; background:linear-gradient(90deg, var(--purple), var(--gold)); box-shadow:0 0 10px rgba(216,181,106,.55); transition:width .7s cubic-bezier(.2,.8,.2,1); }
.draw-progress__labels { display:flex; justify-content:space-between; margin-top:4px; color:rgba(141,135,158,.6); font-family:var(--body); font-size:.72rem; }
.deck-sanctum { position:relative; z-index:3; min-height:220px; padding-top:4px; }
.deck-sanctum__whisper { margin-bottom:13px; text-align:center; color:rgba(217,212,233,.45); font-family:var(--body); font-style:italic; font-size:.9rem; }
.deck-stack { position:relative; height:185px; overflow:visible; }
.deck-stack::before { content:""; position:absolute; left:50%; bottom:4px; width:180px; height:20px; transform:translateX(-50%); border-radius:50%; background:rgba(0,0,0,.65); filter:blur(10px); }
.deck-row { position:relative; height:100%; display:flex; justify-content:center; align-items:flex-end; padding:0 28px 12px; }
.deck-card { position:relative; width:92px; height:147px; flex:0 0 auto; margin:0 -28px; padding:0; border:0; background:none; transform-origin:50% 100%; transition:transform .32s cubic-bezier(.2,.8,.2,1), filter .32s, margin .32s; z-index:1; }
.deck-card .card { cursor:pointer; }
.deck-card:hover, .deck-card.is-hovered { z-index:20; transform:translateY(-22px) rotate(var(--tilt,0deg)) scale(1.13); filter:drop-shadow(0 16px 20px rgba(109,74,255,.28)); margin-left:-18px; margin-right:-18px; }
.deck-card:active { transform:translateY(-12px) scale(1.07); }
.deck-card.is-selected { z-index:30; filter:drop-shadow(0 0 25px rgba(216,181,106,.45)); }
.deck-sanctum.is-pulling .deck-card:not(.is-selected) { opacity:.45; filter:blur(.3px); transform:translateY(4px) scale(.98); }
.deck-sanctum__base { position:absolute; left:50%; bottom:0; width:260px; height:2px; transform:translateX(-50%); background:linear-gradient(90deg, transparent, rgba(216,181,106,.45), transparent); }
.card-flight { position:fixed !important; z-index:90 !important; margin:0 !important; pointer-events:none !important; transform:none !important; transition:none !important; }
.card-flight.is-flying { animation:cardFlight .78s cubic-bezier(.2,.78,.2,1) forwards; }
.fx-burst { position:fixed; z-index:95; width:0; height:0; pointer-events:none; }
.fx-burst i { position:absolute; left:0; top:0; color:var(--gold-bright); font-style:normal; font-size:11px; text-shadow:0 0 12px rgba(216,181,106,.9); animation:burst .85s cubic-bezier(.1,.8,.2,1) forwards; transform:rotate(var(--angle)) translateY(calc(var(--distance) * -1)); }

/* ===== Ritual actions ===== */
.ritual-actions { display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 0 0; }
.primary-button--reading { min-width:260px; }

/* ===== Reading ===== */
.reading-stage { animation:stageIn .75s ease-out; padding-bottom:50px; }
.reading-stage__hero { padding:30px 0 20px; text-align:center; }
.reading-stage__hero h2 { margin:0; font-size:clamp(1.7rem,5vw,2.6rem); font-weight:500; letter-spacing:.16em; }
.reading-status { margin:7px 0 0; color:var(--muted); font-family:var(--body); font-style:italic; }
.reading-status.is-streaming::after { content:""; display:inline-block; width:5px; height:5px; margin-left:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:statusPulse 1s infinite; }
.reading-status.is-done { color:var(--gold); }
.reading-status.is-error { color:#e89aaa; }
.reading-meta-card { padding:16px 18px; border:1px solid rgba(216,181,106,.18); border-radius:12px; background:rgba(12,8,28,.66); }
.reading-meta-card__title { color:var(--gold); font-family:var(--display); font-size:.55rem; letter-spacing:.22em; margin-bottom:7px; }
.meta { color:rgba(217,212,233,.62); font-family:var(--body); font-style:italic; font-size:.9rem; line-height:1.6; }
.reading-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 26px; }
.reading-card { position:relative; padding:14px 15px; border:1px solid rgba(216,181,106,.16); border-radius:10px; background:linear-gradient(145deg, rgba(25,18,52,.75), rgba(8,6,19,.9)); overflow:hidden; }
.reading-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--gold); opacity:.65; }
.reading-card.is-reversed::before { background:var(--purple-soft); }
.reading-card__number { color:rgba(216,181,106,.5); font-family:var(--display); font-size:.48rem; letter-spacing:.16em; }
.reading-card__name { color:var(--gold-bright); font-size:.92rem; }
.reading-card__position { color:var(--muted); font-family:var(--body); font-style:italic; font-size:.78rem; }
.reading-card__orientation { margin-top:6px; color:rgba(169,140,255,.7); font-family:var(--display); font-size:.45rem; letter-spacing:.1em; }
.prose { margin:0 auto; max-width:900px; color:#ddd8e7; font-family:var(--serif); font-size:1.02rem; line-height:2; }
.prose p { margin:1.05em 0; }
.prose h2, .prose h3 { margin:2em 0 .7em; color:var(--gold-bright); font-family:var(--display); font-weight:500; letter-spacing:.08em; line-height:1.5; }
.prose h2 { font-size:1.15rem; }
.prose h3 { font-size:1rem; color:var(--silver); }
.prose h2::before, .prose h3::before { content:"✦"; margin-right:10px; color:var(--gold); font-size:.7em; }
.prose strong { color:var(--gold-bright); font-weight:600; }
.prose em { color:var(--purple-soft); }
.prose blockquote { margin:1.4em 0; padding:15px 18px; border-left:2px solid var(--gold); background:rgba(216,181,106,.055); color:#c8c1d5; font-family:var(--body); font-style:italic; }
.prose ul, .prose ol { padding-left:1.3em; }
.prose li { margin:.35em 0; }
.prose code { color:var(--gold); background:rgba(216,181,106,.08); padding:2px 6px; border-radius:4px; }
.reading-echo { max-width:680px; margin:55px auto 0; padding:36px 25px; text-align:center; border-top:1px solid rgba(216,181,106,.18); border-bottom:1px solid rgba(216,181,106,.18); opacity:0; transform:translateY(16px); transition:.9s ease; }
.reading-echo.is-visible { opacity:1; transform:none; }
.reading-echo__eyebrow { color:var(--gold); font-family:var(--display); font-size:.56rem; letter-spacing:.3em; }
.reading-echo__sigil { margin:13px 0; color:var(--gold-bright); text-shadow:0 0 20px rgba(216,181,106,.5); }
.reading-echo p { margin:0 auto 12px; color:#eee8f3; font-family:var(--body); font-size:1.3rem; font-style:italic; line-height:1.8; }
.reading-echo__line { display:block; width:80px; height:1px; margin:12px auto; background:var(--gold); opacity:.45; }
.reading-echo > span:last-child { color:var(--muted); font-family:var(--body); font-style:italic; }
.reading-actions { display:flex; justify-content:center; align-items:center; gap:20px; margin-top:34px; }

/* ===== Footer / errors ===== */
.site-footer { padding:25px 20px 50px; text-align:center; color:rgba(141,135,158,.5); font-family:var(--body); font-style:italic; font-size:.8rem; }
.site-footer p { margin:2px 0; }
.site-footer__sigil { color:rgba(216,181,106,.55); margin-bottom:5px; }
.fatal-error { position:fixed; inset:0 0 auto 0; z-index:200; padding:15px; color:#fff; background:#5b1730; text-align:center; font-family:var(--serif); }

/* ===== Animations ===== */
@keyframes introCopy { to { opacity:1; transform:none; } }
@keyframes sigilAppear { from { opacity:0; transform:translate(-50%,-56%) scale(.8) rotate(-8deg); } to { opacity:.8; transform:translate(-50%,-56%) scale(1) rotate(0); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spinReverse { to { transform:rotate(-360deg); } }
@keyframes starPulse { 0%,100% { opacity:.65; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes statusPulse { 0%,100% { opacity:.4; transform:scale(.8); } 50% { opacity:1; transform:scale(1.1); } }
@keyframes breathingGlow { 0%,100% { opacity:.55; transform:translate(-50%,-50%) scale(.96); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.04); } }
@keyframes nebulaDrift { from { transform:scale(1) translate3d(0,0,0); } to { transform:scale(1.06) translate3d(2%,-1%,0); } }
@keyframes starDrift { to { transform:translate(70px,40px); } }
@keyframes runeFloat { from { transform:translateY(0) rotate(0); opacity:0; } 10% { opacity:.28; } 90% { opacity:.18; } to { transform:translateY(-120vh) rotate(180deg); opacity:0; } }
@keyframes stageIn { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes panelExit { to { opacity:0; transform:translateY(-14px) scale(.98); filter:blur(3px); } }
@keyframes slotReveal { 0% { transform:scale(.82); box-shadow:0 0 0 transparent; } 50% { transform:scale(1.045); box-shadow:0 0 38px rgba(216,181,106,.5); } 100% { transform:scale(1); } }
@keyframes cardFlight { 0% { transform:translate3d(0,0,0) rotate(0) scale(1); opacity:1; } 42% { transform:translate3d(calc(var(--dx) * .45), calc(var(--dy) * .45 - 70px), 0) rotate(var(--rot)) scale(1.16); } 100% { transform:translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--rot) * -.4)) scale(.96); opacity:.98; } }
@keyframes burst { 0% { opacity:0; transform:rotate(var(--angle)) translateY(0) scale(.4); } 18% { opacity:1; } 100% { opacity:0; transform:rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(.1); } }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .spread-row { grid-template-columns:1fr; max-width:620px; }
  .celtic-layout { grid-template-columns:1fr 1.25fr 1fr; grid-template-rows:auto auto; }
  .celtic-column--right { grid-column:3; grid-row:1 / span 2; }
  .celtic-column--left { grid-column:1; grid-row:1 / span 2; }
  .celtic-root { grid-column:2; grid-row:2; }
  .celtic-cross { grid-column:2; grid-row:1; }
}

@media (max-width: 720px) {
  .masthead { width:calc(100% - 24px); padding-top:25px; }
  .brand-mark__roman { font-size:.52rem; letter-spacing:.22em; }
  .brand-mark h1 { font-size:2rem; letter-spacing:.18em; }
  .brand-mark__sub { font-size:.42rem; letter-spacing:.1em; }
  .app-shell { width:calc(100% - 18px); }
  .ritual-progress { gap:4px; margin-bottom:20px; }
  .ritual-progress__item { flex-direction:column; gap:2px; font-size:.43rem; }
  .ritual-progress__item span { width:22px; height:22px; }
  .ritual-progress__line { width:12px; }
  .setup-panel { padding:26px 16px; border-radius:16px; }
  .panel-heading p { font-size:.9rem; }
  .setup-footer { flex-direction:column; align-items:stretch; }
  .primary-button { width:100%; }
  .ritual-stage__header { align-items:flex-start; flex-direction:column; }
  .ritual-table { min-height:660px; padding:22px 12px; border-radius:16px; }
  .magic-circle--table { width:92vw; top:38%; opacity:.38; }
  .spread-area.three { gap:9px; width:100%; }
  .spread-area.three .slot { min-width:0; }
  .spread-area.single .slot { width:142px; }
  .slot-label { font-size:.43rem; }
  .celtic-layout { grid-template-columns:86px 1fr 86px; gap:8px; }
  .celtic-cross { height:190px; }
  .celtic-cross .slot { width:82px; }
  .celtic-root { gap:7px; }
  .celtic-column { gap:7px; }
  .celtic-root .slot, .celtic-column .slot { min-width:0; }
  .draw-progress { width:95%; }
  .deck-stack { height:175px; }
  .deck-card { width:78px; height:125px; margin:0 -24px; }
  .deck-card:hover, .deck-card.is-hovered { transform:translateY(-16px) scale(1.09); margin-left:-16px; margin-right:-16px; }
  .reading-cards { grid-template-columns:1fr; }
  .reading-actions { flex-direction:column; }
  .reading-actions .text-button { padding:8px; }
  .prose { font-size:.98rem; line-height:1.9; }
  .cursor-aura { display:none; }
}

@media (max-width: 420px) {
  .ritual-progress__item b { display:none; }
  .ritual-progress__line { width:18px; }
  .spread-option { min-height:102px; padding:15px; }
  .spread-option__sigil { width:34px; height:34px; flex-basis:34px; }
  .ritual-table { min-height:620px; }
  .celtic-layout { grid-template-columns:66px 1fr 66px; }
  .celtic-cross .slot { width:66px; }
  .deck-card { width:68px; height:109px; margin:0 -21px; }
  .card-text .name { font-size:.63rem; }
  .card-text .orientation, .card-text .keywords { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@supports (padding: env(safe-area-inset-top)) {
  .masthead { padding-top:calc(25px + env(safe-area-inset-top)); }
  .site-footer { padding-bottom:calc(50px + env(safe-area-inset-bottom)); }
}