:root {
  --ink: #1e1b18;
  --muted: #69605a;
  --paper: #fff8ee;
  --paper-strong: #fffdf8;
  --mist: #eef6f6;
  --sky: #9ec8d7;
  --jade: #7bb7a8;
  --lotus: #f2b5b4;
  --gold: #d7aa5b;
  --deep-gold: #9b6b29;
  --night: #272331;
  --violet: #a68de0;
  --radius: 18px;
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@property --edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* {
  box-sizing: border-box;
}

html {
  background: #fff8ee;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.95), transparent 24rem),
    radial-gradient(circle at 12% 12%, rgba(242, 181, 180, 0.22), transparent 18rem),
    linear-gradient(145deg, #fffaf2 0%, #f7efe4 55%, #eef7f7 100%);
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(215, 170, 91, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 170, 91, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 70%);
  content: "";
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 246, 215, 0.96), transparent 16rem),
    linear-gradient(180deg, #fff8ea 0%, #e9f3f0 56%, #f9ead7 100%);
  opacity: 0;
  transition: opacity 180ms ease;
}

body.is-page-leaving .page-transition {
  opacity: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  width: min(1160px, calc(100% - 28px));
  min-height: 4.4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  backdrop-filter: blur(16px);
}

.social-links,
.site-nav {
  display: inline-flex;
  align-items: center;
}

.social-links {
  gap: 0.28rem;
}

.social-links button {
  display: grid;
  width: 1.72rem;
  height: 1.72rem;
  place-items: center;
  border: 1px solid rgba(155, 107, 41, 0.14);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.5);
  color: rgba(42, 36, 31, 0.58);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.social-links button:hover,
.social-links button:focus-visible {
  border-color: rgba(155, 107, 41, 0.24);
  background: rgba(255, 253, 248, 0.72);
  color: rgba(42, 36, 31, 0.82);
}

.site-nav {
  gap: 0.3rem;
  border: 1px solid rgba(155, 107, 41, 0.14);
  border-radius: 999px;
  padding: 0.25rem;
  background: rgba(255, 253, 248, 0.72);
  box-shadow: 0 12px 32px rgba(155, 107, 41, 0.08);
}

.site-nav a {
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.site-nav a[aria-current="page"],
.site-nav a:hover {
  background: rgba(215, 170, 91, 0.18);
  color: var(--ink);
}

main {
  position: relative;
  width: min(1160px, calc(100% - 28px));
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--deep-gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  font-family: "Cormorant Garamond", serif;
}

.home-hero {
  display: grid;
  min-height: calc(100vh - 4.4rem);
  grid-template-rows: auto 1fr;
  gap: 1.8rem;
  padding: 1.2rem 0 2rem;
  align-items: center;
}

.hero-copy h1,
.page-hero h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.7rem, 17vw, 8rem);
  line-height: 0.88;
  letter-spacing: 0;
}

.hero-copy p:not(.eyebrow),
.page-hero p,
.library-intro,
.about-copy p,
.home-manifesto p {
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

.hero-actions,
.share-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.3rem;
}

.primary-action,
.quiet-link,
.ghost-button,
.draw-button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
}

.primary-action,
.draw-button {
  border: 0;
  padding: 0 1.15rem;
  background: linear-gradient(135deg, #2e7970, #74aa9d);
  color: white;
  box-shadow: 0 16px 34px rgba(74, 128, 118, 0.25);
}

.quiet-link,
.ghost-button {
  border: 1px solid rgba(155, 107, 41, 0.22);
  padding: 0 1rem;
  background: rgba(255, 253, 248, 0.65);
  color: var(--ink);
}

.pack-hero {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.pack-hero img {
  width: min(25rem, 86vw);
  border-radius: 24px;
  filter: drop-shadow(0 30px 44px rgba(76, 94, 102, 0.22));
}

.pack-glow {
  position: absolute;
  z-index: -1;
  width: min(23rem, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 220, 145, 0.6), transparent 62%);
  animation: breathe 3.6s ease-in-out infinite;
}

.rarity-strip,
.home-manifesto,
.page-hero,
.oracle-layout,
.story-library,
.about-grid {
  padding: clamp(2rem, 7vw, 4.8rem) 0;
}

.rarity-strip {
  border-top: 1px solid rgba(155, 107, 41, 0.16);
}

.rarity-strip h2,
.section-heading h2,
.about-copy h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 5.4rem);
  line-height: 0.92;
}

.rarity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.rarity-grid article,
.reading-panel,
.question-panel,
.about-card,
.gallery-card {
  border: 1px solid rgba(155, 107, 41, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.7);
  box-shadow: 0 18px 50px rgba(155, 107, 41, 0.08);
}

.rarity-grid article {
  padding: 1rem;
}

.rarity-dot {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.8rem;
  border-radius: 999px;
}

.rarity-n { background: #514a51; }
.rarity-r { background: #7893a5; }
.rarity-sr { background: var(--violet); box-shadow: 0 0 20px rgba(166, 141, 224, 0.6); }
.rarity-ssr { background: linear-gradient(135deg, #9bd5e7, #e8b3e8, #f7d27c); box-shadow: 0 0 24px rgba(185, 172, 235, 0.72); }
.rarity-ur { background: #f0c45f; box-shadow: 0 0 28px rgba(240, 196, 95, 0.8); }

.rarity-grid strong {
  display: block;
  font-size: 1.1rem;
}

.rarity-grid p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home-manifesto {
  border-top: 1px solid rgba(155, 107, 41, 0.16);
}

.home-manifesto p {
  margin: 0;
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 8vw, 4.8rem);
  line-height: 1;
}

.page-hero {
  display: grid;
  gap: 1rem;
}

.oracle-layout {
  display: grid;
  gap: 1.2rem;
}

.oracle-stage {
  position: relative;
  display: grid;
  min-height: min(38rem, 78vh);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(155, 107, 41, 0.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), transparent 19rem),
    linear-gradient(180deg, rgba(182, 218, 226, 0.78), rgba(255, 248, 238, 0.9));
  box-shadow: 0 24px 70px rgba(76, 94, 102, 0.16);
}

.oracle-stage::after {
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(215, 170, 91, 0.24);
  border-radius: 22px;
  content: "";
}

.pack-button {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(22rem, 78vw);
  border: 0;
  padding: 0;
  background: transparent;
  place-items: center;
}

.pack-button img {
  border-radius: 22px;
  filter: drop-shadow(0 26px 34px rgba(76, 94, 102, 0.22));
  transition: transform 360ms ease, filter 360ms ease;
}

.pack-button:hover img,
.pack-button.is-opening img {
  transform: scale(1.04) translateY(-0.35rem);
  filter: drop-shadow(0 28px 45px rgba(215, 170, 91, 0.34));
}

.pack-button.is-opening::before {
  position: absolute;
  inset: 12% 14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 174, 0.85), transparent 68%);
  content: "";
  animation: flare 850ms ease-out;
}

.result-card {
  position: relative;
  z-index: 3;
  display: none;
  width: min(20rem, 72vw);
  aspect-ratio: 957 / 1643;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 28px 72px rgba(40, 38, 48, 0.24);
}

.result-card.is-visible {
  display: block;
  animation: riseCard 780ms cubic-bezier(0.2, 0.9, 0.18, 1) both;
}

.result-card img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.result-card::after {
  position: absolute;
  inset: -0.7rem;
  z-index: -1;
  border-radius: 24px;
  opacity: 0;
  content: "";
}

.question-panel,
.reading-panel {
  padding: 1rem;
}

.question-panel {
  display: grid;
  gap: 0.8rem;
}

.question-panel label {
  color: var(--deep-gold);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

textarea {
  width: 100%;
  min-height: 5.5rem;
  resize: vertical;
  border: 1px solid rgba(155, 107, 41, 0.18);
  border-radius: 14px;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  outline: none;
}

textarea:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 4px rgba(123, 183, 168, 0.16);
}

.reading-panel {
  display: grid;
  gap: 1rem;
}

.reading-panel[hidden] {
  display: none;
}

.reading-panel h2 {
  margin: 0;
  font-size: clamp(2.3rem, 9vw, 4.8rem);
  line-height: 0.95;
}

.reading-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.reading-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.reading-meta div {
  border: 1px solid rgba(155, 107, 41, 0.12);
  border-radius: 14px;
  padding: 0.8rem;
  background: rgba(255, 248, 238, 0.58);
}

.reading-meta span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reading-meta strong {
  display: block;
  margin-top: 0.35rem;
  line-height: 1.2;
}

.gentle-whisper {
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.65rem;
  line-height: 1.2;
}

.story-pill,
.variant-badge {
  width: fit-content;
  border: 1px solid rgba(155, 107, 41, 0.2);
  border-radius: 999px;
  padding: 0.48rem 0.72rem;
  background: rgba(255, 248, 238, 0.7);
  color: var(--deep-gold);
  font-size: 0.75rem;
  font-weight: 900;
}

.ghost-button.is-copied {
  border-color: var(--jade);
  background: rgba(123, 183, 168, 0.16);
}

.section-heading {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.section-heading span {
  width: fit-content;
  border: 1px solid rgba(155, 107, 41, 0.16);
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 253, 248, 0.72);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.card-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.8rem, 1fr));
  gap: 0.85rem;
}

.gallery-card {
  overflow: hidden;
}

.gallery-card-art {
  position: relative;
  display: grid;
  aspect-ratio: 957 / 1643;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 238, 174, 0.22), transparent 31%),
    linear-gradient(145deg, #293141, #384d5d 54%, #f0e3cd);
}

.gallery-card-art::after {
  position: absolute;
  inset: 0.6rem;
  border: 1px solid rgba(255, 248, 238, 0.34);
  border-radius: 12px;
  content: "";
}

.gallery-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.locked-card-mark {
  color: rgba(255, 253, 248, 0.44);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.8rem;
  font-weight: 700;
}

.gallery-card-copy {
  display: grid;
  gap: 0.24rem;
  padding: 0.7rem;
}

.gallery-card-copy span,
.gallery-card-copy em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.gallery-card-copy strong {
  font-size: 0.9rem;
  line-height: 1.25;
}

.about-grid {
  display: grid;
  gap: 1rem;
}

.about-portrait {
  display: grid;
  place-items: center;
}

.about-portrait img {
  width: min(24rem, 84vw);
  border-radius: 28px;
  filter: drop-shadow(0 24px 40px rgba(76, 94, 102, 0.18));
}

.about-card {
  padding: 1.1rem;
}

.about-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.65rem;
}

.about-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

@keyframes breathe {
  0%,
  100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes flare {
  from { transform: scale(0.4); opacity: 0; }
  55% { opacity: 1; }
  to { transform: scale(1.35); opacity: 0; }
}

@keyframes riseCard {
  from {
    transform: translateY(4rem) scale(0.72) rotate(-4deg);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@media (min-width: 820px) {
  .home-hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 1.05fr);
    grid-template-rows: 1fr;
    gap: 3rem;
  }

  .hero-copy h1,
  .page-hero h1 {
    font-size: clamp(5.2rem, 9vw, 8rem);
  }

  .pack-hero img {
    width: min(29rem, 42vw);
  }

  .oracle-layout {
    grid-template-columns: minmax(20rem, 0.86fr) minmax(25rem, 1.14fr);
    align-items: start;
  }

  .oracle-stage {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .about-grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
  }

  .section-heading {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

@media (max-width: 560px) {
  .site-header {
    width: min(100% - 20px, 1160px);
  }

  .site-nav a {
    padding: 0.48rem 0.58rem;
  }

  main {
    width: min(100% - 20px, 1160px);
  }

  .hero-copy h1,
  .page-hero h1 {
    font-size: 3.55rem;
  }

  .reading-meta {
    grid-template-columns: 1fr;
  }

  .card-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* First-season ritual experience: mobile-first pack opening */
.ritual-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 27%, rgba(255, 246, 215, 0.96), transparent 15rem),
    radial-gradient(circle at 16% 42%, rgba(240, 181, 176, 0.2), transparent 16rem),
    radial-gradient(circle at 82% 38%, rgba(126, 178, 184, 0.22), transparent 16rem),
    linear-gradient(180deg, #fff8ea 0%, #e9f3f0 45%, #f9ead7 100%);
}

.ritual-page::before {
  background:
    radial-gradient(ellipse at 50% 78%, rgba(116, 151, 142, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(24, 35, 45, 0.18)),
    radial-gradient(circle at 18% 18%, rgba(215, 170, 91, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 22%, rgba(242, 181, 180, 0.16) 0 1px, transparent 2px);
  background-size: auto, auto, 130px 130px, 170px 170px;
  mask-image: none;
}

.ritual-page::after {
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  height: 38vh;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(88, 128, 122, 0.16), transparent 32%),
    radial-gradient(ellipse at 80% 100%, rgba(198, 154, 91, 0.16), transparent 30%),
    linear-gradient(180deg, transparent, rgba(105, 96, 90, 0.18));
  content: "";
}

.ritual-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 50%;
  display: flex;
  width: min(100% - 22px, 1080px);
  min-height: 3.7rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  transform: translateX(-50%);
}

.ritual-header .social-links,
.ritual-header .site-nav {
  color: #2a241f;
}

.ritual-header .site-nav {
  border-color: rgba(155, 107, 41, 0.16);
  background: rgba(255, 253, 248, 0.58);
}

.ritual-header .site-nav a {
  color: rgba(42, 36, 31, 0.72);
}

.ritual-shell {
  width: min(100%, 1180px);
  min-height: 100svh;
}

.ritual-stage {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 4.8rem 1rem 8.4rem;
  isolation: isolate;
}

.ritual-stage::before {
  position: absolute;
  inset: auto auto 6vh 50%;
  z-index: -2;
  width: min(34rem, 118vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 239, 186, 0.62), rgba(123, 183, 168, 0.2) 35%, transparent 67%);
  transform: translateX(-50%);
  content: "";
}

.ritual-stage::after {
  position: absolute;
  inset: 18% 0 auto;
  z-index: -3;
  height: 48vh;
  background:
    linear-gradient(90deg, transparent, rgba(255, 253, 248, 0.22), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(255, 253, 248, 0.3), transparent 65%);
  content: "";
}

.is-drawing .ritual-stage::after {
  animation: stageFlash 1280ms ease-out both;
}

.ritual-copy {
  position: absolute;
  z-index: 2;
  top: 5.1rem;
  left: 50%;
  width: min(92vw, 25rem);
  text-align: center;
  transform: translateX(-50%);
}

.ritual-copy h1 {
  display: none;
  margin: 0;
  color: #362820;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(0.98rem, 3.5vw, 1.25rem);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 12px 32px rgba(255, 255, 255, 0.4);
}

.ritual-copy .eyebrow {
  color: var(--deep-gold);
}

.ritual-stage .pack-button {
  width: min(68vw, 20rem);
  margin-top: 0;
  animation: floatPack 4s ease-in-out infinite;
}

.ritual-stage .pack-button::before {
  position: absolute;
  right: 8%;
  bottom: -1.6rem;
  left: 8%;
  z-index: -1;
  height: 3.2rem;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(111, 139, 134, 0.18) 0%, rgba(111, 139, 134, 0.1) 36%, transparent 72%),
    radial-gradient(ellipse at 50% 56%, rgba(215, 170, 91, 0.12) 0%, rgba(215, 170, 91, 0.06) 42%, transparent 78%);
  filter: blur(14px);
  transform: translateZ(0);
  content: "";
}

.ritual-stage .pack-button img {
  width: 100%;
  border-radius: 0;
  filter:
    drop-shadow(0 18px 20px rgba(105, 96, 90, 0.12))
    drop-shadow(0 0 22px rgba(255, 226, 168, 0.2));
}

.pack-button span {
  position: absolute;
  bottom: -2.6rem;
  left: 50%;
  border: 1px solid rgba(155, 107, 41, 0.16);
  border-radius: 999px;
  padding: 0.52rem 0.8rem;
  background: rgba(255, 253, 248, 0.66);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.pack-button.is-opening {
  animation: openPack 780ms ease-in-out both;
}

.pack-button.is-opening::before,
.pack-button.is-opening::after {
  position: absolute;
  inset: 10% 0;
  z-index: -1;
  border-radius: 50%;
  content: "";
}

.pack-button.is-opening::before {
  background: radial-gradient(circle, rgba(255, 241, 184, 0.95), transparent 68%);
  animation: flashBurst 780ms ease-out both;
}

.pack-button.is-opening::after {
  opacity: 0;
  animation: rarityHalo 780ms ease-out both;
}

.pack-button.is-opening.rarity-n::after {
  background: transparent;
}

.pack-button.is-opening.rarity-n::before {
  background: transparent;
  animation: none;
}

.pack-button.is-opening.rarity-r::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 68%);
}

.pack-button.is-opening.rarity-r::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 68%);
}

.pack-button.is-opening.rarity-sr::before {
  background: radial-gradient(circle, rgba(185, 145, 255, 0.52), transparent 68%);
}

.pack-button.is-opening.rarity-ssr::before {
  background: conic-gradient(from 80deg, rgba(139, 223, 239, 0.44), rgba(255, 172, 215, 0.44), rgba(255, 226, 112, 0.52), rgba(139, 223, 239, 0.44));
}

.pack-button.is-opening.rarity-ur::before {
  background: radial-gradient(circle, rgba(255, 226, 112, 0.8), rgba(255, 248, 197, 0.44) 34%, transparent 70%);
}

.pack-button.is-opening.rarity-sr::after {
  background: radial-gradient(circle, rgba(174, 139, 242, 0.7), transparent 68%);
}

.pack-button.is-opening.rarity-ssr::after {
  background: conic-gradient(from 80deg, rgba(139, 223, 239, 0.72), rgba(255, 172, 215, 0.72), rgba(255, 226, 112, 0.76), rgba(139, 223, 239, 0.72));
}

.pack-button.is-opening.rarity-ur::after {
  background: radial-gradient(circle, rgba(255, 216, 88, 0.9), rgba(255, 248, 197, 0.52) 34%, transparent 70%);
}

.pack-button.is-drawn {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.76) translateY(2rem);
  transition: opacity 280ms ease, transform 280ms ease;
}

.ritual-stage .result-card {
  position: absolute;
  top: calc(50% - 2.4rem);
  left: 50%;
  width: min(58vw, 17.2rem);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.ritual-stage .result-card.is-visible {
  display: block;
  animation: ritualRiseCard 860ms cubic-bezier(0.18, 0.9, 0.2, 1.08) both;
}

.stage-aspect-chooser {
  position: absolute;
  z-index: 6;
  top: auto;
  bottom: 5.25rem;
  left: 50%;
  display: grid;
  width: min(82vw, 18rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.34rem;
  transform: translateX(-50%);
}

.stage-aspect-chooser[hidden] {
  display: none;
}

.question-dock {
  position: fixed;
  z-index: 25;
  right: 50%;
  bottom: 4.9rem;
  left: auto;
  display: flex;
  justify-content: center;
  padding: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%);
}

.question-dock label {
  grid-column: 1 / -1;
  color: var(--deep-gold);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.question-dock textarea {
  min-height: 2.9rem;
  max-height: 6.5rem;
  border-color: rgba(155, 107, 41, 0.14);
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
}

.question-dock textarea::placeholder {
  color: rgba(105, 96, 90, 0.56);
}

.question-dock .draw-button {
  min-width: 10.5rem;
  min-height: 3.05rem;
  padding-inline: 1.25rem;
  white-space: nowrap;
}

.has-card .question-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  transition: opacity 220ms ease, transform 220ms ease;
}

.is-drawing .question-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%) translateY(1rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.reading-sheet {
  width: min(100% - 20px, 560px);
  margin: -4.5rem auto 6.8rem;
  scroll-margin-top: 5.4rem;
  border: 1px solid rgba(155, 107, 41, 0.18);
  border-radius: 24px;
  padding: 1.15rem;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 22px 60px rgba(31, 34, 44, 0.2);
}

.reading-sheet[hidden] {
  display: none;
}

.reading-sheet h2 {
  margin: 0;
  font-size: clamp(2.2rem, 9vw, 4rem);
  line-height: 0.96;
}

.reading-sheet p {
  color: var(--muted);
  line-height: 1.7;
}

.reading-sheet strong {
  color: #5b421f;
  font-weight: 900;
}

.aspect-chooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.aspect-button {
  display: grid;
  min-width: 0;
  min-height: 2.55rem;
  place-items: center;
  gap: 0.05rem;
  border: 1px solid rgba(155, 107, 41, 0.12);
  border-radius: 14px;
  padding: 0.2rem 0.12rem 0.18rem;
  background: rgba(255, 253, 248, 0.58);
  color: #76582f;
  box-shadow: 0 10px 26px rgba(105, 96, 90, 0.08);
  font-weight: 900;
  backdrop-filter: blur(10px);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.aspect-icon {
  display: block;
  width: 1.42rem;
  height: 1.42rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.aspect-icon *,
.aspect-icon circle,
.aspect-icon rect {
  fill: none !important;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

.aspect-icon path {
  fill: none !important;
}

.aspect-button small {
  display: block;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aspect-button:hover,
.aspect-button:focus-visible {
  transform: translateY(-0.08rem);
}

.aspect-button.is-active {
  border-color: rgba(155, 107, 41, 0.28);
  background: rgba(255, 248, 238, 0.82);
  color: #5b421f;
  box-shadow:
    0 12px 30px rgba(155, 107, 41, 0.14),
    inset 0 0 0 1px rgba(255, 253, 248, 0.56);
}

.mobile-tabbar {
  position: fixed;
  z-index: 35;
  right: 1rem;
  bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  left: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2rem;
  --tab-index: 0;
  --tab-count: 4;
  --tab-gap: 0.2rem;
  border: 1px solid rgba(155, 107, 41, 0.16);
  border-radius: 18px;
  padding: 0.28rem;
  background: rgba(255, 253, 248, 0.82);
  box-shadow: 0 18px 46px rgba(105, 96, 90, 0.18);
  backdrop-filter: blur(18px);
}

.mobile-tabbar::before {
  position: absolute;
  top: 0.28rem;
  bottom: 0.28rem;
  left: 0.28rem;
  z-index: 0;
  width: calc((100% - 0.56rem - (var(--tab-gap) * (var(--tab-count) - 1))) / var(--tab-count));
  border-radius: 14px;
  background: rgba(215, 170, 91, 0.2);
  box-shadow:
    0 10px 24px rgba(155, 107, 41, 0.1),
    inset 0 0 0 1px rgba(255, 253, 248, 0.44);
  content: "";
  transform: translateX(calc(var(--tab-index) * (100% + var(--tab-gap))));
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.has-card .mobile-tabbar {
  --tab-index: 1;
}

.mobile-tabbar a {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 2.05rem;
  place-items: center;
  border-radius: 14px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  transition: color 180ms ease;
}

.mobile-tabbar a[aria-current="page"],
.has-card .mobile-tabbar a[data-tab="draw"],
.mobile-tabbar a:hover,
.mobile-tabbar a:focus-visible {
  color: var(--ink);
}

@keyframes floatPack {
  0%,
  100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-0.7rem) rotate(1deg); }
}

@keyframes touchCue {
  0%,
  100% {
    opacity: 0.72;
    transform: translateX(50%) translateY(0) scale(1);
  }
  45% {
    opacity: 1;
    transform: translateX(50%) translateY(-0.28rem) scale(1.04);
  }
}

@keyframes openPack {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  42% { transform: translateY(-0.45rem) scale(1.04); opacity: 1; }
  100% { transform: translateY(0.8rem) scale(0.9); opacity: 0; }
}

@keyframes flashBurst {
  0% { transform: scale(0.2); opacity: 0; }
  26% { opacity: 1; }
  58% { transform: scale(1.45); opacity: 0.72; }
  100% { transform: scale(2.05); opacity: 0; }
}

@keyframes rarityHalo {
  0% { transform: scale(0.25) rotate(0deg); opacity: 0; }
  38% { opacity: 1; }
  100% { transform: scale(2) rotate(85deg); opacity: 0; }
}

@keyframes stageFlash {
  0% { opacity: 0.05; }
  34% { opacity: 0.9; }
  70% { opacity: 0.72; }
  100% { opacity: 0.24; }
}

@keyframes ritualRiseCard {
  0% {
    transform: translate(-50%, -46%) translateZ(0) scale(0.96);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) translateZ(0) scale(1);
    opacity: 1;
  }
}

/* Ritual reveal: soft pack flash, steady card reveal, layered edge aura */
.ritual-stage .result-card {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
  transform: translate(-50%, -50%) translateZ(0);
  will-change: opacity;
}

.card-rotor {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  filter: drop-shadow(0 16px 18px rgba(40, 38, 48, 0.14));
  will-change: opacity;
}

.card-rotor::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 248, 214, 0.86), rgba(255, 248, 214, 0.28) 38%, transparent 70%);
  opacity: 0;
  content: "";
}

.result-card.is-revealing .card-rotor::before {
  animation: revealWash 740ms ease-out both;
}

.card-rotor::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  content: "";
}

.ritual-stage .result-card.is-visible {
  animation: ritualRiseCard 360ms ease-out both;
}

.ritual-stage .result-card .card-rotor {
  transform-origin: center center;
  transform: translateZ(0);
}

.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.card-front-face {
  background: #fff;
  opacity: 0;
  transform: scale(1);
  transform-origin: center center;
  z-index: 1;
  transition: opacity 520ms ease;
}

.card-front-face img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.card-back-face {
  background: #f7ead0;
  opacity: 1;
  transform: scale(1);
  transform-origin: center center;
  z-index: 3;
  transition: opacity 520ms ease;
  box-shadow:
    inset 0 0 0 1px rgba(155, 107, 41, 0.16),
    inset 0 0 24px rgba(155, 107, 41, 0.08);
}

.result-card.is-revealing .card-back-face {
  opacity: 0;
}

.result-card.is-revealing .card-front-face {
  opacity: 1;
  transform: scale(1);
}

.edge-flow {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 10px currentColor);
}

.edge-flow-top,
.edge-flow-bottom {
  left: 0;
  width: 54%;
  height: 4px;
  background: linear-gradient(90deg, transparent, currentColor 48%, transparent);
}

.edge-flow-left,
.edge-flow-right {
  top: 0;
  width: 4px;
  height: 44%;
  background: linear-gradient(180deg, transparent, currentColor 48%, transparent);
}

.edge-flow-top { top: 1px; }
.edge-flow-right { right: 1px; }
.edge-flow-bottom { right: 0; bottom: 1px; }
.edge-flow-left { bottom: 0; left: 1px; }

.result-card[data-ready="true"] .edge-flow {
  mix-blend-mode: screen;
}

.result-card[data-ready="true"]::after {
  inset: 0;
  z-index: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  filter: none;
  pointer-events: none;
  animation: auraBreathe 6.8s ease-in-out infinite;
}

.result-card[data-ready="true"].rarity-n::after {
  opacity: 0;
  animation: none;
}

.result-card[data-ready="true"].rarity-r::after {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.62),
    0 0 7px 3px rgba(255, 255, 255, 0.42),
    0 0 20px 8px rgba(255, 255, 255, 0.2),
    0 0 46px 18px rgba(255, 255, 255, 0.08);
  animation-duration: 7.2s;
}

.result-card[data-ready="true"].rarity-r .card-rotor::after {
  opacity: 1;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.58),
    inset 0 0 8px rgba(255, 255, 255, 0.26);
}

.result-card[data-ready="true"].rarity-r .edge-flow {
  opacity: 1;
  color: rgba(255, 255, 255, 0.82);
  animation: edgeFlow 5.8s linear infinite;
}

.result-card[data-ready="true"].rarity-sr::after {
  box-shadow:
    0 0 0 2px rgba(185, 145, 255, 0.88),
    0 0 8px 3px rgba(185, 145, 255, 0.58),
    0 0 23px 9px rgba(185, 145, 255, 0.28),
    0 0 58px 21px rgba(185, 145, 255, 0.1);
  animation-duration: 6.8s;
}

.result-card[data-ready="true"].rarity-sr .card-rotor::after {
  opacity: 1;
  box-shadow:
    inset 0 0 0 2px rgba(185, 145, 255, 0.82),
    inset 0 0 9px rgba(185, 145, 255, 0.38);
}

.result-card[data-ready="true"].rarity-sr .edge-flow {
  opacity: 1;
  color: rgba(185, 145, 255, 0.98);
  animation: edgeFlow 4.8s linear infinite;
}

.result-card[data-ready="true"].rarity-ssr::after {
  box-shadow:
    0 0 0 2px rgba(255, 190, 230, 0.86),
    0 0 8px 3px rgba(139, 223, 239, 0.56),
    0 0 24px 9px rgba(255, 226, 112, 0.3),
    0 0 62px 22px rgba(255, 172, 215, 0.12);
  animation: auraBreathe 6.4s ease-in-out infinite, auraHue 12s linear infinite;
}

.result-card[data-ready="true"].rarity-ssr .card-rotor::after {
  opacity: 1;
  box-shadow:
    inset 0 0 0 2px rgba(255, 190, 230, 0.78),
    inset 0 0 9px rgba(139, 223, 239, 0.34);
}

.result-card[data-ready="true"].rarity-ssr .edge-flow {
  opacity: 1;
  color: rgba(255, 190, 230, 1);
  animation: edgeFlow 4.4s linear infinite, edgeHue 2.8s linear infinite;
}

.result-card[data-ready="true"].rarity-ur::after {
  box-shadow:
    0 0 0 2px rgba(255, 226, 112, 0.96),
    0 0 9px 4px rgba(255, 226, 112, 0.7),
    0 0 28px 11px rgba(255, 196, 70, 0.36),
    0 0 72px 26px rgba(215, 170, 91, 0.14);
  animation-duration: 6s;
}

.result-card[data-ready="true"].rarity-ur .card-rotor::after {
  opacity: 1;
  box-shadow:
    inset 0 0 0 2px rgba(255, 226, 112, 0.92),
    inset 0 0 11px rgba(255, 226, 112, 0.42);
}

.result-card[data-ready="true"].rarity-ur .edge-flow {
  opacity: 1;
  color: rgba(255, 226, 112, 1);
  animation: edgeFlow 3.8s linear infinite, edgePulse 1.8s ease-in-out infinite;
}

.card-back-face::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 37%, rgba(255, 255, 255, 0.3) 47%, transparent 58%),
    radial-gradient(circle at 50% 85%, rgba(215, 170, 91, 0.2), transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.34;
  content: "";
  animation: cardBackSheen 6s ease-in-out infinite;
}

.card-back-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-drawing .ritual-stage::before {
  animation: none;
}

.is-drawing .pack-button.rarity-r::before,
.is-drawing .pack-button.rarity-sr::before,
.is-drawing .pack-button.rarity-ssr::before,
.is-drawing .pack-button.rarity-ur::before {
  animation: flashBurst 780ms ease-out both;
}

.is-drawing .pack-button {
  animation: openPack 780ms ease-in-out both;
}

.is-drawing .pack-button img {
  filter: drop-shadow(0 24px 34px rgba(105, 96, 90, 0.22));
}

.is-drawing .pack-button::before {
  inset: -16%;
  z-index: -2;
  background: transparent;
  filter: none;
}

.is-drawing .pack-button.rarity-r::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42), transparent 68%);
}

.is-drawing .pack-button.rarity-sr::before {
  background: radial-gradient(circle, rgba(185, 145, 255, 0.68), transparent 70%);
}

.is-drawing .pack-button.rarity-ssr::before {
  background: conic-gradient(from 80deg, rgba(139, 223, 239, 0.58), rgba(255, 172, 215, 0.58), rgba(255, 226, 112, 0.68), rgba(139, 223, 239, 0.58));
}

.is-drawing .pack-button.rarity-ur::before {
  background: radial-gradient(circle, rgba(255, 226, 112, 0.92), rgba(255, 248, 197, 0.58) 34%, transparent 70%);
}

.is-drawing .pack-button::after {
  inset: -28%;
  z-index: -3;
  background:
    conic-gradient(
      from 20deg,
      transparent 0deg,
      rgba(255, 248, 214, 0.55) 24deg,
      transparent 36deg,
      rgba(215, 170, 91, 0.42) 58deg,
      transparent 78deg,
      rgba(255, 241, 184, 0.5) 104deg,
      transparent 126deg,
      rgba(215, 170, 91, 0.36) 148deg,
      transparent 180deg,
      rgba(255, 248, 214, 0.44) 210deg,
      transparent 360deg
  );
  filter: none;
  animation: burstRays 780ms ease-out both;
}

.is-drawing .pack-button.rarity-n::after,
.is-drawing .pack-button.rarity-n::before {
  display: none;
}

.is-drawing .pack-button.rarity-r::after {
  display: none;
}

.is-drawing .pack-button.rarity-sr::after {
  background:
    conic-gradient(
      from 20deg,
      transparent 0deg,
      rgba(185, 145, 255, 0.42) 32deg,
      transparent 58deg,
      rgba(185, 145, 255, 0.34) 118deg,
      transparent 156deg,
      rgba(185, 145, 255, 0.32) 236deg,
      transparent 360deg
    );
}

.is-drawing .pack-button.rarity-ssr::after {
  background:
    conic-gradient(
      from 20deg,
      transparent 0deg,
      rgba(139, 223, 239, 0.48) 24deg,
      transparent 42deg,
      rgba(255, 172, 215, 0.44) 82deg,
      transparent 112deg,
      rgba(255, 226, 112, 0.48) 156deg,
      transparent 190deg,
      rgba(139, 223, 239, 0.42) 240deg,
      transparent 360deg
    );
}

.is-drawing .pack-button.rarity-ur::after {
  background:
    conic-gradient(
      from 20deg,
      transparent 0deg,
      rgba(255, 248, 214, 0.68) 24deg,
      transparent 36deg,
      rgba(215, 170, 91, 0.56) 58deg,
      transparent 78deg,
      rgba(255, 241, 184, 0.62) 104deg,
      transparent 126deg,
      rgba(215, 170, 91, 0.5) 148deg,
      transparent 180deg,
      rgba(255, 248, 214, 0.58) 210deg,
      transparent 360deg
    );
}

@keyframes cardBackSheen {
  0%,
  100% {
    opacity: 0.22;
    transform: translateX(-18%);
  }
  50% {
    opacity: 0.48;
    transform: translateX(18%);
  }
}

@keyframes revealWash {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  34% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes auraBreathe {
  0%,
  100% {
    opacity: 0.62;
    transform: translateZ(0) scale(1);
  }
  50% {
    opacity: 0.82;
    transform: translateZ(0) scale(1.006);
  }
}

@keyframes auraHue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

@keyframes rainbowDrift {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

@keyframes sparklePulse {
  0% {
    opacity: 0.72;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1.01);
  }
}

@keyframes burstHalo {
  0% {
    transform: translateX(-50%) scale(0.65);
    opacity: 0.12;
  }
  35% {
    opacity: 0.95;
  }
  100% {
    transform: translateX(-50%) scale(1.28);
    opacity: 0;
  }
}

@keyframes burstRays {
  0% {
    transform: scale(0.22) rotate(0deg);
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  58% {
    transform: scale(1.1) rotate(35deg);
    opacity: 0.78;
  }
  100% {
    transform: scale(1.85) rotate(88deg);
    opacity: 0;
  }
}

@keyframes packShake {
  0% { transform: translateY(0) rotate(-1.2deg); }
  18% { transform: translateY(-0.2rem) rotate(-0.2deg); }
  36% { transform: translateY(-0.65rem) rotate(1.1deg); }
  60% { transform: translateY(-0.3rem) rotate(-0.7deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes edgeSpin {
  from { --edge-angle: 0deg; }
  to { --edge-angle: 360deg; }
}

@keyframes edgePulse {
  0%,
  100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes edgeFlow {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(265%);
  }
}

@keyframes edgeFlowVertical {
  0% {
    transform: translateY(-110%);
  }
  100% {
    transform: translateY(330%);
  }
}

@keyframes edgeHue {
  from { filter: hue-rotate(0deg) drop-shadow(0 0 8px currentColor); }
  to { filter: hue-rotate(360deg) drop-shadow(0 0 8px currentColor); }
}

.result-card[data-ready="true"].rarity-r .edge-flow-right,
.result-card[data-ready="true"].rarity-r .edge-flow-left {
  animation: edgeFlowVertical 5.8s linear infinite;
}

.result-card[data-ready="true"].rarity-sr .edge-flow-right,
.result-card[data-ready="true"].rarity-sr .edge-flow-left {
  animation: edgeFlowVertical 4.8s linear infinite;
}

.result-card[data-ready="true"].rarity-ssr .edge-flow-right,
.result-card[data-ready="true"].rarity-ssr .edge-flow-left {
  animation: edgeFlowVertical 4.4s linear infinite, edgeHue 2.8s linear infinite;
}

.result-card[data-ready="true"].rarity-ur .edge-flow-right,
.result-card[data-ready="true"].rarity-ur .edge-flow-left {
  animation: edgeFlowVertical 3.8s linear infinite, edgePulse 1.8s ease-in-out infinite;
}

@media (min-width: 820px) {
  .ritual-stage .pack-button {
    width: min(28vw, 23rem);
  }

  .ritual-stage .result-card {
    top: 50%;
    width: min(23vw, 20rem);
  }

  .stage-aspect-chooser {
    top: calc(50% + min(17vw, 15rem));
    bottom: auto;
  }

  .question-dock {
    width: auto;
    transform: translateX(50%);
  }

  .has-card .question-dock {
    transform: translateX(50%) translateY(1rem);
  }

  .mobile-tabbar {
    display: none;
  }
}

@media (max-width: 560px) {
  .ritual-header .site-nav {
    display: none;
  }

  .ritual-stage {
    min-height: 100svh;
    padding-top: 3rem;
    padding-bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px));
  }

  .ritual-stage .pack-button {
    width: min(62vw, 16.8rem);
    margin-top: 0.1rem;
  }

  .ritual-header {
    min-height: 3.65rem;
  }

  .social-links button {
    width: 1.56rem;
    height: 1.56rem;
    font-size: 0.5rem;
  }

  .ritual-stage .result-card {
    top: calc(50% - 3.65rem);
    width: min(82vw, 23rem);
  }

  .stage-aspect-chooser {
    bottom: calc(3.45rem + env(safe-area-inset-bottom, 0px));
    width: min(84vw, 18.5rem);
    gap: 0.18rem;
  }

  .stage-aspect-chooser .aspect-button {
    min-height: 2rem;
    border-radius: 11px;
    padding: 0.12rem 0.08rem 0.1rem;
  }

  .stage-aspect-chooser .aspect-icon {
    width: 1.15rem;
    height: 1.15rem;
    stroke-width: 3.2;
  }

  .stage-aspect-chooser .aspect-button small {
    font-size: 0.48rem;
    line-height: 0.95;
  }

  .mobile-tabbar {
    right: 0.48rem;
    bottom: calc(0.28rem + env(safe-area-inset-bottom, 0px));
    left: 0.48rem;
    gap: 0.14rem;
    --tab-gap: 0.14rem;
    border-radius: 14px;
    padding: 0.18rem;
  }

  .mobile-tabbar::before {
    top: 0.18rem;
    bottom: 0.18rem;
    left: 0.18rem;
    width: calc((100% - 0.36rem - (var(--tab-gap) * (var(--tab-count) - 1))) / var(--tab-count));
    border-radius: 11px;
  }

  .mobile-tabbar a {
    min-height: 1.65rem;
    border-radius: 11px;
    font-size: 0.6rem;
  }

  .reading-sheet {
    position: fixed;
    z-index: 24;
    top: calc(4.55rem + env(safe-area-inset-top, 0px));
    right: auto;
    left: 50%;
    overflow: auto;
    width: min(84vw, 20rem);
    max-height: min(52svh, 25rem);
    margin: 0;
    border-radius: 18px;
    padding: 0.9rem 0.92rem 1rem;
    scroll-margin-top: 0;
    box-shadow: 0 16px 42px rgba(31, 34, 44, 0.22);
    transform: translateX(-50%);
  }

  .reading-sheet h2 {
    margin-top: 0.28rem;
    font-size: clamp(1.28rem, 5vw, 1.72rem);
    line-height: 1.06;
  }

  .reading-sheet p {
    margin: 0.62rem 0 0;
    font-size: 0.86rem;
    line-height: 1.62;
  }

  .reading-sheet .eyebrow {
    margin: 0;
    color: #8a622d;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }

  .reading-sheet .share-row {
    display: none;
  }

  .question-dock {
    bottom: 4.7rem;
  }

  .question-dock .draw-button {
    width: 100%;
  }
}

@media (max-width: 560px) and (max-height: 720px) {
  .ritual-stage {
    padding-top: 1rem;
    padding-bottom: calc(4.95rem + env(safe-area-inset-bottom, 0px));
  }

  .ritual-stage .result-card {
    top: calc(50% - 4.25rem);
    width: min(74vw, 20rem);
  }

  .stage-aspect-chooser {
    bottom: calc(3.18rem + env(safe-area-inset-bottom, 0px));
  }

  .reading-sheet {
    top: calc(4.35rem + env(safe-area-inset-top, 0px));
    width: min(82vw, 19rem);
    max-height: min(48svh, 21rem);
  }
}

@media (max-width: 560px) and (max-height: 640px) {
  .ritual-stage .result-card {
    top: calc(50% - 4.45rem);
    width: min(68vw, 18rem);
  }

  .stage-aspect-chooser .aspect-button {
    min-height: 1.84rem;
  }

  .stage-aspect-chooser .aspect-icon {
    width: 1.04rem;
    height: 1.04rem;
  }

  .reading-sheet {
    top: calc(4.2rem + env(safe-area-inset-top, 0px));
    width: min(80vw, 18rem);
    max-height: min(44svh, 18rem);
  }
}