:root {
  color-scheme: dark;
  --void: #0f0913;
  --deep-plum: #1b1020;
  --ritual-pink: #ff78c6;
  --orb-violet: #b9a5ff;
  --cold-cyan: #aeefff;
  --spectral-green: #c9f7c2;
  --pearl: #fff0fa;
  --tarnished-silver: #aaa4b5;
  --bg: var(--void);
  --bg-soft: var(--deep-plum);
  --surface: rgba(36, 23, 43, 0.86);
  --surface-strong: #2a1b31;
  --surface-soft: rgba(69, 43, 77, 0.52);
  --border: rgba(202, 191, 219, 0.20);
  --border-strong: rgba(255, 120, 198, 0.42);
  --text: #f7edf5;
  --muted: #c9becb;
  --pink: #f4a3da;
  --pink-strong: var(--ritual-pink);
  --pink-soft: #efb9df;
  --lavender: var(--orb-violet);
  --mauve: #8f5b88;
  --teal: var(--cold-cyan);
  --danger: #ef8f9d;
  --success: var(--spectral-green);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  --radius: 24px;
  --radius-small: 14px;
}

* { box-sizing: border-box; }

/* Explicitly win over component display rules when JavaScript toggles views. */
[hidden] { display: none !important; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(164, 83, 143, 0.18), transparent 32rem),
    radial-gradient(circle at 85% 22%, rgba(87, 69, 132, 0.18), transparent 30rem),
    linear-gradient(145deg, #0f0a12 0%, #1b1020 55%, #100b14 100%);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(244,163,218,.8) 0 1px, transparent 1.2px);
  background-position: 0 0, 45px 62px;
  background-size: 120px 120px, 175px 175px;
  mask-image: linear-gradient(to bottom, black, transparent 68%);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.01em;
}
h1 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.1rem); }
h2 { margin-bottom: 0.45rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
h3 { margin-bottom: 0.35rem; font-size: 1.45rem; }

.ambient {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  pointer-events: none;
}
.ambient-one { top: -10rem; right: -6rem; background: var(--pink-strong); }
.ambient-two { bottom: -14rem; left: -8rem; background: #6757af; }

.surface {
  background: linear-gradient(145deg, rgba(53, 34, 60, 0.92), rgba(28, 18, 34, 0.94));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.auth-card {
  width: min(100%, 30rem);
  padding: 2.2rem;
  border-radius: var(--radius);
  text-align: center;
}

.auth-card .muted { margin-bottom: 1.6rem; }

.app-shell {
  width: min(1480px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 1.25rem;
}

.topbar-actions,
.header-button-group,
.sacrifice-controls,
.modal-actions,
.card-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.eyebrow {
  margin-bottom: 0.35rem;
  color: var(--pink-soft);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.muted { color: var(--muted); line-height: 1.55; }

.button,
.icon-button {
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.button:hover,
.icon-button:hover { transform: translateY(-1px); }
.button:active,
.icon-button:active { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }

.button {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  font-weight: 700;
}
.button-small { min-height: 2.25rem; padding: 0.45rem 0.8rem; font-size: 0.86rem; }
.button-primary {
  color: #27101f;
  background: linear-gradient(135deg, var(--pink), var(--pink-strong));
  box-shadow: 0 8px 25px rgba(255, 120, 198, 0.22);
}
.button-primary:hover { box-shadow: 0 10px 30px rgba(255, 120, 198, 0.32); }
.button-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--border);
}
.button-danger {
  color: #2d1015;
  background: var(--danger);
}
.icon-button {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  font-size: 1.15rem;
}

.shrine {
  position: relative;
  min-height: 24rem;
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(20rem, 1.3fr);
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3.4rem);
  border-radius: 32px;
  --seal-progress: 0;
  --seal-glow: .18;
  --seal-spectrum-opacity: .04;
  --seal-ring-glow: .04;
  --seal-ring-inset: .02;
  --seal-spoke-glow: .08;
  --seal-inner-ring: .08;
  --seal-pink-glow: .12;
  --seal-cold-glow: .05;
  --seal-saturation: .76;
  transition: border-color .5s ease, box-shadow .5s ease, background .5s ease;
}

.shrine::after {
  content: "";
  position: absolute;
  inset: auto -10% -45% 35%;
  height: 22rem;
  background: radial-gradient(circle, rgba(244, 163, 218, 0.14), transparent 65%);
  pointer-events: none;
}

.shrine-copy { position: relative; z-index: 2; }
.shrine-status { margin-bottom: .45rem; color: var(--muted); font-size: 1.02rem; line-height: 1.5; }
.shrine-whisper {
  min-height: 1.4rem;
  margin-bottom: 0;
  color: var(--pink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08rem;
  font-style: italic;
  letter-spacing: .01em;
  opacity: .9;
}
.last-cycle-status {
  margin: .9rem 0 0;
  padding: .7rem .85rem;
  border-left: 2px solid rgba(244, 163, 218, .5);
  border-radius: 0 10px 10px 0;
  color: var(--muted);
  background: rgba(0, 0, 0, .12);
  font-size: .8rem;
  line-height: 1.45;
}

.shrine-visual {
  position: relative;
  min-height: 18rem;
  display: grid;
  place-items: center;
}

.orbital-ring {
  position: absolute;
  border: 1px solid rgba(244, 163, 218, 0.25);
  border-radius: 50%;
}
.ring-one { width: 15rem; height: 15rem; transform: rotate(20deg); animation: orbit-one 19s linear infinite; }
.ring-two { width: 20rem; height: 9rem; transform: rotate(-18deg); animation: orbit-two 25s linear infinite reverse; }
.ring-three {
  width: 12rem;
  height: 20rem;
  transform: rotate(68deg);
  border-style: dashed;
  animation: orbit-three 31s linear infinite;
}

.seal-stars {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  opacity: calc(.12 + var(--seal-glow));
  background-image:
    radial-gradient(circle at 12% 45%, rgba(255, 225, 245, .9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 37% 8%, rgba(244, 163, 218, .9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 24%, rgba(190, 167, 229, .95) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 68%, rgba(255, 225, 245, .85) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 54% 91%, rgba(244, 163, 218, .85) 0 1.3px, transparent 2px),
    radial-gradient(circle at 21% 80%, rgba(190, 167, 229, .9) 0 1px, transparent 1.7px);
  filter: drop-shadow(0 0 7px rgba(255, 120, 198, .45));
  animation: star-breathe 4.8s ease-in-out infinite;
}

.gate-spokes {
  position: absolute;
  width: 13.5rem;
  height: 13.5rem;
  border-radius: 50%;
  opacity: calc(.08 + var(--seal-glow));
  background: repeating-conic-gradient(
    from 7deg,
    rgba(244, 163, 218, .55) 0 1deg,
    transparent 1deg 29deg
  );
  mask: radial-gradient(circle, transparent 0 43%, black 45% 47%, transparent 49% 100%);
  animation: turn-key 46s linear infinite;
}

.seal-caption {
  position: absolute;
  bottom: -.25rem;
  display: grid;
  justify-items: center;
  gap: .05rem;
  padding: .38rem .72rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(14, 9, 17, .76);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.seal-caption strong { color: var(--pink-soft); font-size: .9rem; letter-spacing: .03em; }

.sigil {
  position: relative;
  width: 10rem;
  height: 10rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 163, 218, 0.45);
  border-radius: 48% 52% 46% 54%;
  background: radial-gradient(circle at 50% 40%, rgba(244, 163, 218, 0.24), rgba(67, 35, 70, 0.32) 45%, rgba(13, 9, 16, 0.75) 75%);
  box-shadow: 0 0 80px rgba(244, 163, 218, var(--seal-glow)), inset 0 0 35px rgba(0,0,0,.45);
  filter: saturate(calc(.7 + var(--seal-progress)));
  animation: float 6s ease-in-out infinite;
  transition: border-color .5s ease, box-shadow .5s ease, filter .5s ease;
}
.sigil-small { width: 6rem; height: 6rem; margin: 0 auto 1rem; }
.sigil-eye {
  width: 3.5rem;
  height: 1.65rem;
  display: block;
  border: 2px solid var(--pink);
  border-radius: 50% 10% 50% 10%;
  transform: rotate(45deg);
  background: radial-gradient(circle, #130912 0 18%, var(--pink-strong) 20% 33%, #3b2038 35% 100%);
  box-shadow: 0 0 24px rgba(255, 120, 198, .45);
}
.sigil-small .sigil-eye { width: 2.2rem; height: 1.05rem; }
.void-orb {
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid rgba(255, 206, 239, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe1f5 0 8%, var(--pink-strong) 18%, #5a294f 52%, #140b17 76%);
  box-shadow: 0 0 18px rgba(255, 120, 198, .6), inset 0 0 7px rgba(255,255,255,.2);
  opacity: .9;
}
.o1 { top: .5rem; left: 1.3rem; }
.o2 { top: 1.15rem; right: .45rem; width: .8rem; height: .8rem; }
.o3 { bottom: .65rem; right: 1.4rem; width: 1.45rem; height: 1.45rem; }
.o4 { bottom: 1.15rem; left: .45rem; width: .7rem; height: .7rem; }
.sigil-small .void-orb { transform: scale(.62); }
.sigil-small .o1 { top: .05rem; left: .35rem; }
.sigil-small .o2 { top: .55rem; right: -.05rem; }
.sigil-small .o3 { bottom: .05rem; right: .35rem; }
.sigil-small .o4 { bottom: .5rem; left: -.1rem; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1deg); }
}
@keyframes orbit-one {
  from { transform: rotate(20deg); }
  to { transform: rotate(380deg); }
}
@keyframes orbit-two {
  from { transform: rotate(-18deg); }
  to { transform: rotate(342deg); }
}
@keyframes orbit-three {
  from { transform: rotate(68deg); }
  to { transform: rotate(428deg); }
}
@keyframes turn-key { to { transform: rotate(360deg); } }
@keyframes star-breathe {
  0%, 100% { transform: scale(.98); filter: drop-shadow(0 0 5px rgba(255, 120, 198, .32)); }
  50% { transform: scale(1.02); filter: drop-shadow(0 0 12px rgba(255, 120, 198, .58)); }
}

.shrine[data-seal-stage="fractured"] {
  border-color: rgba(239, 143, 157, .24);
  background: linear-gradient(145deg, rgba(46, 29, 53, .94), rgba(25, 16, 31, .96));
}
.shrine[data-seal-stage="fractured"] .orbital-ring { border-color: rgba(239, 143, 157, .18); }
.shrine[data-seal-stage="forming"] { border-color: rgba(190, 167, 229, .34); }
.shrine[data-seal-stage="forming"] .orbital-ring { border-color: rgba(190, 167, 229, .34); }
.shrine[data-seal-stage="strong"] {
  border-color: rgba(244, 163, 218, .46);
  box-shadow: var(--shadow), 0 0 55px rgba(244, 163, 218, .09);
}
.shrine[data-seal-stage="sealed"] {
  border-color: rgba(150, 211, 189, .62);
  background: linear-gradient(145deg, rgba(51, 38, 62, .96), rgba(22, 28, 34, .96));
  box-shadow: var(--shadow), 0 0 78px rgba(150, 211, 189, .16);
}
.shrine[data-seal-stage="sealed"] .orbital-ring { border-color: rgba(150, 211, 189, .5); }
.shrine[data-seal-stage="sealed"] .sigil-eye { border-color: var(--success); box-shadow: 0 0 30px rgba(150, 211, 189, .58); }
.shrine[data-seal-stage="sealed"] .progress-fill { background: linear-gradient(90deg, var(--pink), var(--success)); }
.shrine[data-seal-stage="sealed"] .seal-caption strong { color: var(--success); }

.progress-track {
  width: 100%;
  height: 0.8rem;
  overflow: hidden;
  margin: 1.1rem 0 1.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
}
.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mauve), var(--pink-strong));
  box-shadow: 0 0 20px rgba(255,120,198,.35);
  transition: width .35s ease;
}

.shrine-metrics,
.reality-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.shrine-metrics > div,
.reality-stats > div {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: rgba(255,255,255,.035);
}
.metric-label,
.reality-stats span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.shrine-metrics strong,
.reality-stats strong { font-size: 1.35rem; }
.sacrifice-controls { margin-top: 1rem; }
.sacrifice-controls input { width: 8rem; }

.realm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(21rem, 0.8fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: start;
}

.realm-card {
  min-width: 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: var(--radius);
}
.realm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.reality-stats { margin: 1.25rem 0; }
.status-chip,
.tag,
.placeholder-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.32rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--pink-soft);
  background: rgba(244, 163, 218, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
}

.tab-row {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  width: fit-content;
  max-width: 100%;
}
.tab-button {
  min-height: 2.1rem;
  padding: 0.42rem 0.8rem;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
}
.tab-button.active {
  color: #2a101f;
  background: var(--pink);
}

.card-list { display: grid; gap: 0.75rem; }
.item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.item-card.due { border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--pink-strong); }
.item-card h3 { margin: 0 0 .2rem; font-family: Inter, sans-serif; font-size: 1rem; }
.item-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--muted); font-size: .8rem; }
.item-note { margin: .55rem 0 0; color: var(--muted); line-height: 1.45; font-size: .88rem; }
.item-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.item-card .button { min-height: 2.25rem; padding: .45rem .75rem; font-size: .8rem; }
.card-actions { justify-content: flex-end; }

.empty-state {
  padding: 2rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  text-align: center;
  color: var(--muted);
}
.empty-state strong { display: block; margin-bottom: .35rem; color: var(--text); }

.void-placeholder {
  min-height: 26rem;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
  border: 1px dashed var(--border-strong);
  border-radius: 20px;
  background: radial-gradient(circle, rgba(94, 75, 133, .14), transparent 65%);
}
.void-glyph { margin-bottom: .6rem; color: var(--pink); font-size: 3rem; text-shadow: 0 0 25px rgba(244,163,218,.5); }
.placeholder-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }

.stack-form,
.form-grid { display: grid; gap: 1rem; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
label, fieldset { display: grid; gap: .45rem; color: var(--pink-soft); font-size: .82rem; font-weight: 700; }
fieldset { margin: 0; padding: .8rem; border: 1px solid var(--border); border-radius: 14px; }
legend { padding: 0 .35rem; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  color: var(--text);
  background: rgba(9, 6, 11, .48);
  padding: .78rem .85rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(244,163,218,.12);
}
textarea { resize: vertical; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.checkbox-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .65rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255,255,255,.03);
  font-weight: 500;
}
.checkbox-option input { width: auto; margin: 0; }
.form-message { min-height: 1.25rem; margin: .8rem 0 0; color: var(--danger); font-size: .85rem; }
.form-message[data-state="info"] { color: var(--pink-soft); }
.form-message[data-state="success"] { color: var(--success); }
.text-button { border: 0; padding: .2rem; color: var(--pink-soft); background: transparent; font-size: .82rem; text-decoration: underline; text-underline-offset: .18rem; }
.text-button:hover { color: var(--pink); }
.text-button:disabled { cursor: not-allowed; opacity: .5; }
.helper-text { margin: .6rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }

.modal {
  width: min(44rem, calc(100% - 1.5rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  background: #211529;
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(7, 4, 9, .78); backdrop-filter: blur(6px); }
.modal-card { padding: 1.4rem; }
.modal-card-narrow { max-width: 30rem; margin: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.modal-actions { justify-content: flex-end; margin-top: 1.25rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 100;
  max-width: min(32rem, calc(100% - 2rem));
  padding: .8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  background: #2d1b35;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 1rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(239,143,157,.65); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 980px) {
  .shrine { grid-template-columns: 1fr; }
  .shrine-visual { min-height: 14rem; }
  .realm-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .app-shell { width: min(100% - 1rem, 1480px); padding-top: .6rem; }
  .topbar, .realm-header { align-items: flex-start; }
  .topbar h1 { font-size: 2rem; }
  .shrine { min-height: auto; padding: 1.2rem; }
  .shrine-visual { min-height: 12rem; transform: scale(.82); margin: -1.3rem 0; }
  .shrine-metrics, .reality-stats { grid-template-columns: 1fr; }
  .sacrifice-controls > * { flex: 1; }
  .sacrifice-controls input { min-width: 6rem; }
  .realm-card { padding: 1rem; }
  .realm-header { display: grid; }
  .header-button-group { width: 100%; }
  .header-button-group .button { flex: 1; }
  .item-card { grid-template-columns: 1fr; }
  .card-actions { justify-content: flex-start; }
  .form-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .tab-row { width: 100%; overflow-x: auto; }
  .tab-button { flex: 1; white-space: nowrap; }
}

/* v1.2.0 — iridescent Yog-Sothoth spectrum. Pink remains the mortal UI color;
   the shrine carries the colder, unstable colors of the Gate. */
body {
  background:
    radial-gradient(circle at 14% 6%, rgba(255, 120, 198, 0.17), transparent 31rem),
    radial-gradient(circle at 84% 17%, rgba(185, 165, 255, 0.16), transparent 29rem),
    radial-gradient(circle at 72% 86%, rgba(174, 239, 255, 0.075), transparent 27rem),
    linear-gradient(145deg, var(--void) 0%, var(--deep-plum) 55%, #100b14 100%);
}

body::before {
  background-image:
    radial-gradient(circle, rgba(255, 240, 250, .84) 0 1px, transparent 1.25px),
    radial-gradient(circle, rgba(255, 120, 198, .76) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(174, 239, 255, .58) 0 1px, transparent 1.3px);
  background-position: 0 0, 45px 62px, 92px 31px;
  background-size: 120px 120px, 175px 175px, 221px 221px;
}

.ambient-one {
  background: var(--ritual-pink);
}

.ambient-two {
  background: linear-gradient(135deg, var(--orb-violet), var(--cold-cyan));
}

.button-primary {
  color: #27101f;
  background: linear-gradient(135deg, var(--pink), var(--ritual-pink));
  box-shadow: 0 8px 25px rgba(255, 120, 198, 0.24), 0 0 18px rgba(185, 165, 255, 0.08);
}

.shrine {
  isolation: isolate;
  border-color: rgba(170, 164, 181, .25);
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 120, 198, .08), transparent 35%),
    radial-gradient(circle at 76% 23%, rgba(174, 239, 255, .055), transparent 32%),
    linear-gradient(145deg, rgba(48, 29, 56, .95), rgba(20, 14, 28, .97));
}

.shrine::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--seal-spectrum-opacity);
  background: conic-gradient(
    from 40deg,
    transparent 0 8%,
    rgba(255, 120, 198, .56) 12%,
    rgba(185, 165, 255, .5) 26%,
    rgba(174, 239, 255, .46) 42%,
    rgba(201, 247, 194, .38) 58%,
    rgba(255, 240, 250, .5) 73%,
    rgba(255, 120, 198, .5) 88%,
    transparent 96%
  );
  filter: blur(48px) saturate(1.25);
  animation: threshold-spectrum 32s linear infinite;
}

.shrine::after {
  /* Keep the spectral bloom circular so its rectangular box cannot create
     a full-width horizontal seam across the shrine controls. */
  inset: auto -6rem -8rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 48% 46%,
    rgba(255, 240, 250, .10) 0 10%,
    rgba(174, 239, 255, .075) 28%,
    rgba(185, 165, 255, .035) 48%,
    transparent 70%
  );
  filter: blur(18px);
}

.orbital-ring {
  border-color: rgba(170, 164, 181, .30);
  box-shadow:
    0 0 18px rgba(185, 165, 255, var(--seal-ring-glow)),
    inset 0 0 16px rgba(174, 239, 255, var(--seal-ring-inset));
}

.ring-one {
  border-color: rgba(255, 120, 198, .35);
}

.ring-two {
  border-color: rgba(174, 239, 255, .30);
}

.ring-three {
  border-color: rgba(201, 247, 194, .26);
}

.seal-stars {
  background-image:
    radial-gradient(circle at 12% 45%, rgba(255, 240, 250, .96) 0 1px, transparent 1.7px),
    radial-gradient(circle at 37% 8%, rgba(255, 120, 198, .94) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 24%, rgba(185, 165, 255, .98) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 68%, rgba(174, 239, 255, .92) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 54% 91%, rgba(201, 247, 194, .88) 0 1.3px, transparent 2px),
    radial-gradient(circle at 21% 80%, rgba(255, 240, 250, .90) 0 1px, transparent 1.7px);
  filter: drop-shadow(0 0 8px rgba(174, 239, 255, .36));
}

.gate-spokes {
  background: repeating-conic-gradient(
    from 7deg,
    rgba(255, 120, 198, .62) 0 .6deg,
    rgba(185, 165, 255, .54) .6deg 1deg,
    transparent 1deg 29deg
  );
  filter: drop-shadow(0 0 8px rgba(174, 239, 255, var(--seal-spoke-glow)));
}

.seal-caption {
  border-color: rgba(170, 164, 181, .30);
  color: var(--tarnished-silver);
  background: rgba(12, 8, 16, .78);
}

.seal-caption strong {
  color: var(--pearl);
  text-shadow: 0 0 12px rgba(174, 239, 255, .25);
}

.sigil {
  border-color: rgba(170, 164, 181, .48);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 240, 250, .20), transparent 25%),
    conic-gradient(
      from 40deg,
      rgba(255, 120, 198, .34),
      rgba(185, 165, 255, .34),
      rgba(174, 239, 255, .28),
      rgba(201, 247, 194, .22),
      rgba(255, 240, 250, .28),
      rgba(255, 120, 198, .34)
    );
  box-shadow:
    0 0 82px rgba(255, 120, 198, var(--seal-pink-glow)),
    0 0 46px rgba(174, 239, 255, var(--seal-cold-glow)),
    inset 0 0 42px rgba(8, 5, 12, .68);
  filter: saturate(var(--seal-saturation));
}

.sigil::before {
  content: "";
  position: absolute;
  inset: .6rem;
  border: 1px solid rgba(255, 240, 250, var(--seal-inner-ring));
  border-radius: 52% 48% 55% 45%;
  transform: rotate(18deg);
  box-shadow: inset 0 0 19px rgba(174, 239, 255, .08);
  pointer-events: none;
}

.sigil-eye {
  border-color: var(--tarnished-silver);
  background:
    radial-gradient(circle, #0b0710 0 16%, rgba(255, 240, 250, .92) 17% 20%, transparent 21%),
    conic-gradient(from 40deg, var(--ritual-pink), var(--orb-violet), var(--cold-cyan), var(--spectral-green), var(--pearl), var(--ritual-pink));
  box-shadow:
    0 0 25px rgba(255, 120, 198, .34),
    0 0 19px rgba(174, 239, 255, .18);
}

.void-orb {
  border-color: rgba(255, 240, 250, .80);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .96) 0 5%, rgba(255, 255, 255, .25) 7%, transparent 13%),
    conic-gradient(from 40deg, var(--ritual-pink), var(--orb-violet), var(--cold-cyan), var(--spectral-green), var(--pearl), var(--ritual-pink));
  box-shadow:
    0 0 20px rgba(255, 120, 198, .42),
    0 0 15px rgba(174, 239, 255, .24),
    inset 0 0 9px rgba(255, 255, 255, .28),
    inset 0 -6px 11px rgba(15, 9, 19, .52);
  animation: orb-spectrum 9s ease-in-out infinite;
}

.o2 { animation-delay: -2.4s; }
.o3 { animation-delay: -5.1s; }
.o4 { animation-delay: -7.3s; }

.progress-fill {
  background: linear-gradient(
    90deg,
    var(--ritual-pink),
    var(--orb-violet) 34%,
    var(--cold-cyan) 62%,
    var(--spectral-green) 82%,
    var(--pearl)
  );
  background-size: 180% 100%;
  box-shadow:
    0 0 21px rgba(255, 120, 198, .32),
    0 0 14px rgba(174, 239, 255, .18);
  animation: seal-flow 7s ease-in-out infinite alternate;
}

.shrine[data-seal-stage="fractured"] {
  border-color: rgba(239, 143, 157, .27);
  background:
    radial-gradient(circle at 22% 52%, rgba(239, 143, 157, .075), transparent 36%),
    linear-gradient(145deg, rgba(43, 27, 51, .96), rgba(21, 14, 29, .98));
}

.shrine[data-seal-stage="forming"] {
  border-color: rgba(185, 165, 255, .40);
}

.shrine[data-seal-stage="strong"] {
  border-color: rgba(174, 239, 255, .42);
  box-shadow: var(--shadow), 0 0 62px rgba(185, 165, 255, .10), 0 0 34px rgba(174, 239, 255, .06);
}

.shrine[data-seal-stage="sealed"] {
  border-color: rgba(201, 247, 194, .64);
  background:
    radial-gradient(circle at 22% 50%, rgba(255, 120, 198, .08), transparent 34%),
    radial-gradient(circle at 76% 35%, rgba(174, 239, 255, .09), transparent 35%),
    linear-gradient(145deg, rgba(47, 35, 58, .97), rgba(17, 27, 31, .98));
  box-shadow:
    var(--shadow),
    0 0 84px rgba(201, 247, 194, .13),
    0 0 50px rgba(174, 239, 255, .08),
    0 0 38px rgba(255, 120, 198, .07);
}

.shrine[data-seal-stage="sealed"] .orbital-ring {
  border-color: rgba(201, 247, 194, .54);
}

.shrine[data-seal-stage="sealed"] .sigil-eye {
  border-color: var(--pearl);
  box-shadow: 0 0 32px rgba(201, 247, 194, .42), 0 0 22px rgba(174, 239, 255, .26);
}

.shrine[data-seal-stage="sealed"] .progress-fill {
  background: linear-gradient(90deg, var(--ritual-pink), var(--orb-violet), var(--cold-cyan), var(--spectral-green), var(--pearl));
}

.shrine[data-seal-stage="sealed"] .seal-caption strong {
  color: var(--pearl);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ritual-pink);
  box-shadow: 0 0 0 3px rgba(255, 120, 198, .11), 0 0 18px rgba(174, 239, 255, .055);
}

@keyframes threshold-spectrum {
  to { transform: rotate(360deg); }
}

@keyframes orb-spectrum {
  0%, 100% { filter: hue-rotate(-8deg) saturate(1.02) brightness(.98); }
  50% { filter: hue-rotate(18deg) saturate(1.22) brightness(1.08); }
}

@keyframes seal-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .shrine::before,
  .void-orb,
  .progress-fill {
    animation: none;
  }
}

.shrine-visual { z-index: 1; }
.shrine::after { z-index: 0; }


/* v1.2.2 — hidden Essential Salts appendix */
.sigil-trigger {
  appearance: none;
  -webkit-appearance: none;
  z-index: 2;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.sigil-trigger:hover {
  border-color: rgba(255, 240, 250, .70);
  box-shadow:
    0 0 92px rgba(255, 120, 198, calc(var(--seal-pink-glow) + .12)),
    0 0 54px rgba(174, 239, 255, calc(var(--seal-cold-glow) + .10)),
    inset 0 0 42px rgba(8, 5, 12, .68);
}

.sigil-trigger:focus-visible {
  outline: 2px solid var(--pearl);
  outline-offset: .45rem;
}

.sigil-trigger.gate-knock {
  animation: gate-knock .5s cubic-bezier(.2, .8, .2, 1);
}

@keyframes gate-knock {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  24% { transform: translateY(2px) rotate(-3deg) scale(.965); }
  48% { transform: translateY(-5px) rotate(2deg) scale(1.035); }
  72% { transform: translateY(1px) rotate(-1deg) scale(.992); }
}

.essential-salts-modal {
  width: min(34rem, calc(100% - 1.5rem));
  border-color: rgba(174, 239, 255, .28);
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 240, 250, .10), transparent 34%),
    linear-gradient(155deg, #26172e, #120d18 72%);
}

.essential-salts-modal::backdrop {
  background: rgba(4, 2, 7, .88);
  backdrop-filter: blur(9px) saturate(.75);
}

.essential-salts-card {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.essential-salts-card::before {
  content: "";
  position: absolute;
  inset: -45% -20% auto;
  height: 16rem;
  pointer-events: none;
  background: conic-gradient(
    from 40deg,
    rgba(255, 120, 198, .17),
    rgba(185, 165, 255, .15),
    rgba(174, 239, 255, .14),
    rgba(201, 247, 194, .11),
    rgba(255, 240, 250, .16),
    rgba(255, 120, 198, .17)
  );
  filter: blur(44px);
}

.essential-salts-card > * {
  position: relative;
  z-index: 1;
}

.essential-salts-card .modal-header {
  text-align: left;
}

.salts-intro,
.salts-warning {
  color: var(--muted);
  line-height: 1.55;
}

.salts-glyph {
  margin: 1rem 0 .35rem;
  color: var(--pearl);
  font-size: 2.15rem;
  text-shadow:
    0 0 16px rgba(255, 120, 198, .50),
    0 0 28px rgba(174, 239, 255, .30);
}

.salts-incantation {
  display: grid;
  gap: .34rem;
  margin: .4rem auto 1.1rem;
  padding: 1.15rem 1rem;
  border-block: 1px solid rgba(170, 164, 181, .30);
  color: var(--pearl);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-shadow:
    0 0 12px rgba(185, 165, 255, .30),
    0 0 18px rgba(174, 239, 255, .15);
}

.salts-warning {
  margin-bottom: 0;
  font-size: .82rem;
  font-style: italic;
}