/* Rituals (one per night) and the cinematic intro. */

/* ───────── rituals ───────── */
.rit-stage { display: grid; gap: 14px; place-items: center; padding: 6px 0; }
.rit-meter { font-family: var(--font-head); color: var(--gold-soft); font-weight: 600; letter-spacing: .04em; text-align: center; min-height: 1.5em; }
.rit-svg { width: min(340px, 82vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(100, 223, 223, .08), transparent 70%); border-radius: 50%; cursor: crosshair; }
.rp { fill: rgba(243, 229, 171, .35); }
.rp.next { fill: #F3E5AB; filter: drop-shadow(0 0 4px #F3E5AB); animation: pulseDot 1s ease-in-out infinite; }
.rp.lit { fill: #64DFDF; }
@keyframes pulseDot { 50% { opacity: .5 } }

.strings { display: flex; gap: 14px; justify-content: center; padding: 8px; }
.strings.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }
.string { width: 52px; height: 200px; border-radius: 26px; border: 1px solid var(--line); background: rgba(15, 16, 26, .6); display: grid; place-items: center; }
.string i { width: 4px; height: 82%; border-radius: 4px; background: var(--c); opacity: .45; box-shadow: 0 0 6px var(--c); transition: .15s; }
.string.on { border-color: var(--c); background: rgba(255, 255, 255, .06); }
.string.on i { opacity: 1; width: 8px; box-shadow: 0 0 22px var(--c), 0 0 40px var(--c); }
@media (max-width: 380px) { .strings { gap: 8px; } .string { width: 44px; } }

.map-wrap { display: flex; align-items: center; gap: 6px; }
.map-src, .map-rift { font-size: 26px; color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
.map-src { align-self: flex-start; margin-top: 14px; }
.map-rift { align-self: flex-end; margin-bottom: 14px; color: #ff8aa6; text-shadow: 0 0 12px var(--crimson); }
.map-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: min(320px, 72vw); background: #2a1d12; padding: 6px; border-radius: 12px; border: 1px solid var(--line); }
.map-tile { aspect-ratio: 1; border: 0; border-radius: 6px; background: linear-gradient(145deg, #5a4128, #3a2a19); padding: 0; transition: transform .15s; }
.map-tile:active { transform: scale(.94); }
.map-tile svg { width: 100%; height: 100%; display: block; }

.rit-canvas { width: min(640px, 100%); height: auto; aspect-ratio: 680 / 440; border-radius: 14px; border: 1px solid var(--line); cursor: crosshair; }

.candle { width: min(420px, 90%); height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; border: 1px solid var(--line); }
.candle i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #E8A04B, #F3E5AB); box-shadow: 0 0 12px #E8A04B; transition: width .25s linear; }
.contract { margin: 0; padding: 18px 18px 18px 40px; background: #efe6d2; color: #2a1d24; border-radius: 10px; max-width: 680px; box-shadow: inset 0 0 40px rgba(120, 80, 30, .35); }
.contract li { margin: 6px 0; font-family: var(--font-story); font-size: calc(var(--story-size) - 2px); font-weight: 600; }
.cl-line { background: none; border: 0; text-align: left; padding: 2px 4px; border-radius: 6px; color: inherit; font: inherit; line-height: 1.45; }
.cl-line:hover { background: rgba(212, 175, 55, .25); }
.cl-line.wrong { background: rgba(224, 51, 95, .18); text-decoration: line-through; }
.cl-line.trap { background: rgba(224, 51, 95, .3); box-shadow: 0 0 0 2px #9d1238; }
.cl-line.found { background: rgba(212, 175, 55, .45); box-shadow: 0 0 0 2px var(--gold); }

.swatches { display: flex; gap: 28px; justify-content: center; text-align: center; }
.sw { width: 96px; height: 130px; border-radius: 40px 40px 48px 48px; border: 2px solid var(--gold-soft); box-shadow: 0 0 30px currentColor; margin: 0 auto 6px; }
.slider { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; width: min(420px, 92%); }
.slider input { width: 100%; height: 32px; }

.weave-pad { border: 0; background: none; padding: 0; border-radius: 50%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.weave-pad canvas { width: min(300px, 74vw); aspect-ratio: 1; display: block; }
.soldiers { width: min(340px, 86vw); height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.soldiers i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #555, #b33); transition: width .3s; }

/* ───────── cinematic intro ───────── */
.intro { position: fixed; inset: 0; z-index: 65; background: #000; overflow: hidden; color: var(--parchment); }
.intro .skip { position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 5; }
.intro .scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.intro .scene.on { opacity: 1; pointer-events: auto; }
.intro .line { position: absolute; left: 0; right: 0; text-align: center; padding: 0 24px; font-family: var(--font-story); font-style: italic; font-weight: 600; font-size: clamp(22px, 5vw, 34px); color: var(--gold-soft); text-shadow: 0 2px 20px #000; opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease; transform: translateY(10px); }
.intro .line.on { opacity: 1; transform: none; }

.alley .sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, #3b2a63 0%, #1a1433 40%, #05040b 80%); }
.alley .walls { position: absolute; inset: 0; transform-origin: 50% 40%; transition: transform 10s cubic-bezier(.3, 0, .2, 1); }
.alley.push .walls { transform: scale(2.2); }
.alley .walls svg { width: 100%; height: 100%; display: block; }
.lamp { opacity: 0; transition: opacity .7s ease; }
.lamp.lit { opacity: 1; animation: flick 2.6s ease-in-out infinite; }
@keyframes flick { 0%, 100% { opacity: 1 } 40% { opacity: .82 } 60% { opacity: .95 } }
.fog { position: absolute; left: -50%; right: -50%; height: 40%; background: radial-gradient(ellipse at center, rgba(160, 150, 200, .22), transparent 65%); filter: blur(10px); animation: drift 14s linear infinite alternate; }
.fog.f1 { bottom: 4%; }
.fog.f2 { bottom: 22%; animation-duration: 22s; opacity: .6; }
@keyframes drift { from { transform: translateX(-10%) } to { transform: translateX(10%) } }

.door-scene { display: grid; place-items: center; background: radial-gradient(ellipse at center, #1c1430, #000 75%); }
.door { position: relative; width: min(260px, 60vw); aspect-ratio: 3 / 5; transition: transform 2.6s cubic-bezier(.5, 0, .2, 1); }
.door .glow { position: absolute; inset: 6% 8% 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: radial-gradient(ellipse at 50% 60%, #fff8dc, #F3E5AB 30%, #D4AF37 60%, transparent 75%); opacity: 0; transition: opacity 2s; }
.door .leaf { position: absolute; top: 6%; bottom: 0; width: 42%; background: linear-gradient(160deg, #3a2a5e, #1b1430); border: 2px solid var(--gold); transition: transform 2.4s cubic-bezier(.5, 0, .2, 1); }
.door .leaf.l { left: 8%; border-radius: 100% 0 0 0 / 40% 0 0 0; transform-origin: left center; }
.door .leaf.r { right: 8%; border-radius: 0 100% 0 0 / 0 40% 0 0; transform-origin: right center; }
.door .leaf::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(212, 175, 55, .5); border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(176, 123, 234, .25) 0 10px, rgba(100, 223, 223, .18) 10px 20px); }
.door .arch { position: absolute; inset: 0 0 auto; height: 14%; border: 2px solid var(--gold); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.door-scene.open .leaf.l { transform: perspective(800px) rotateY(-75deg); }
.door-scene.open .leaf.r { transform: perspective(800px) rotateY(75deg); }
.door-scene.open .glow { opacity: 1; }
.door-scene.enter .door { transform: scale(7); }
.whiteout { position: absolute; inset: 0; background: #fff8dc; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; z-index: 3; }
.whiteout.on { opacity: 1; }

.title-scene { display: grid; place-items: center; text-align: center; background: radial-gradient(ellipse at center, #2a1f48, #05040b 75%); }
.title-scene h1 { font-size: clamp(30px, 7vw, 64px); background: linear-gradient(90deg, #b8932a, #fff3c4, #D4AF37, #fff3c4, #b8932a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; padding: 0 16px; }
@keyframes shimmer { to { background-position: -200% 0 } }

.letter-scene { display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 60%, rgba(255, 176, 80, .18), #07060d 70%); overflow: auto; }
.letter { width: min(620px, 100%); background: linear-gradient(170deg, #f4ecd8, #e5d6b4); color: #2a1d24; border-radius: 6px; padding: 28px 26px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7), inset 0 0 60px rgba(120, 80, 30, .3); font-family: var(--font-story); font-size: calc(var(--story-size) - 1px); font-weight: 600; line-height: 1.55; transform: rotate(-.6deg); margin: auto; }
.letter p { margin: 0 0 .7em; }
.letter .sig { text-align: right; font-style: italic; }
.letter .sealrow { display: grid; place-items: center; gap: 8px; margin-top: 14px; }
.letter .sealrow .small { color: #5a4a5e; }

/* ───────── mobile polish (v2.2) ───────── */
button, a, label { -webkit-tap-highlight-color: transparent; }
.seal:focus:not(:focus-visible), .hold-btn:focus:not(:focus-visible) { outline: none; }
.portrait > img, .portrait > video { object-position: 50% 12%; }
.heat, .progress { width: 100%; max-width: 340px; }
.thread path.track { stroke: rgba(255, 255, 255, .14); stroke-dasharray: none; stroke-dashoffset: 0; filter: none; }
@media (max-width: 640px) {
  .grid-2 .portrait { aspect-ratio: 4 / 4.8; }
  .stage-steps { gap: 8px; align-items: center; }
  .stage-steps span:not(.on) { font-size: 0; width: 12px; height: 12px; padding: 0; border-radius: 50%; }
  .stage-steps span.done { background: var(--gold); }
}

/* ───────── expand to full screen ───────── */
[data-expand] { cursor: zoom-in; }
.expand-chip { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 3px 10px; border-radius: 99px; background: rgba(10, 9, 18, .72); border: 1px solid rgba(212, 175, 55, .55); color: var(--gold-soft); font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .04em; pointer-events: none; }
.tarot .expand-chip, .codex-card .expand-chip { top: 6px; right: 6px; padding: 1px 8px; font-size: 14px; }
.tarot-mini .expand-chip { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(5, 4, 10, .94); display: grid; grid-template-rows: 1fr auto auto; place-items: center; gap: 10px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity .25s ease; cursor: zoom-out; }
.lightbox.on { opacity: 1; }
.lb-stage { position: relative; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.lb-stage img, .lb-stage video { grid-area: 1 / 1; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 12px; box-shadow: 0 20px 80px rgba(0, 0, 0, .7); cursor: default; }
.lb-stage video { opacity: 0; transition: opacity .8s; }
.lb-stage video.live { opacity: 1; }
.lb-cap { font-family: var(--font-head); color: var(--gold-soft); font-size: 18px; font-weight: 700; text-align: center; }
.lb-stage:has(video.live) img { opacity: 0; transition: opacity .8s; }