.angel-ritual { background: #203127; color: #eddfc5; border: 1px solid #756849; border-radius: 1.5rem; box-shadow: 0 12px 40px #101c1720; scroll-margin-top: 5rem; }
.angel-ritual [hidden] { display: none !important; }
.angel-ritual h2, .angel-ritual h3 { color: #f2dbb2; }
.angel-seal { color: #d8b77a; font-size: 2rem; }
.angel-copy, .angel-message { max-width: 55ch; line-height: 1.8; }
.angel-action { padding: .8rem 1.4rem; border-radius: 2rem; font: inherit; cursor: pointer; }
.angel-action { background: #405748; color: #fff7e5; border: 1px solid #405748; }
.angel-ritual button:focus-visible { outline: 3px solid #e1c597; outline-offset: 5px; }
.angel-stage { position: relative; height: 340px; max-width: 640px; margin: 2rem auto 1rem; perspective: 1200px; }
.angel-choice { position: absolute; left: 50%; top: 25px; width: 180px; height: 270px; margin-left: -90px; padding: 0; background: transparent; border: 0; border-radius: 15px; cursor: pointer; transform: translateX(calc((var(--slot) - 2) * 65px)) rotate(calc((var(--slot) - 2) * 9deg)); transform-origin: center 120%; transition: transform 850ms cubic-bezier(.22,.68,.15,1), opacity 550ms ease; box-shadow: 0 12px 24px #29392e25; }
.angel-choice:hover { box-shadow: 0 18px 32px #29392e40; }
.angel-flipper { display: block; width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.22,.68,.15,1); }
.angel-back, .angel-front { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #a88a4a; border-radius: 15px; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 20px; outline: 1px solid #c6b17a; outline-offset: -9px; }
/* Replace this background with card_back.webp when artwork is ready. */
.angel-back { background: radial-gradient(ellipse at center, #60745c, #304d41); color: #e9d3a0; font-size: 2rem; }
.angel-front { transform: rotateY(180deg); color: #344735; font-family: Georgia, serif; font-size: 1.25rem; }
/* Artwork slot: card_front_[id].webp; decorative art should have empty alt text. */
.angel-art { font-size: 3rem; color: #86632d; margin-bottom: .6rem; }
.angel-mantra { font-size: .85rem; margin-top: .8rem; }
.angel-stage:not([data-phase="spread"]) .angel-choice:not(.chosen) { opacity: 0; pointer-events: none; transform: translateY(25px) scale(.85); }
.angel-choice.chosen { transform: translateY(-12px) rotate(0); z-index: 2; box-shadow: 0 24px 38px #29392e35; }
.angel-choice.flipped .angel-flipper { transform: rotateY(180deg); }
.angel-message { animation: angel-appear 700ms ease both; padding: 1.5rem; background: #17271f; border-radius: 1rem; }
@keyframes angel-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 575px) {
 .angel-stage { height: 300px; }
 .angel-choice { width: 150px; height: 235px; margin-left: -75px; transform: translateX(calc((var(--slot) - 2) * 26px)) rotate(calc((var(--slot) - 2) * 7deg)); }
 .angel-front { padding: 15px; font-size: 1.1rem; }
 .angel-message { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .angel-choice, .angel-flipper { transition: none; } .angel-message { animation: none; } }

.angel-home-link { color: #f2dbb2; text-decoration: none; }
.angel-home-link:hover { color: #fff7e5; text-decoration: underline; }
.angel-home-link:focus-visible { outline: 3px solid #e1c597; outline-offset: 5px; }
.angel-teaser .angel-home-link:hover { color: #f2dbb2; text-decoration: none; }
.angel-teaser:hover, .angel-teaser:focus-within { border-color: #887854; }
@media (prefers-reduced-motion: no-preference) {
 .angel-teaser { transition: border-color 350ms ease; }
}

.angel-room-image { display: block; width: 100%; height: clamp(140px, 22vw, 240px); object-fit: cover; object-position: center 65%; border-radius: 1rem; }