/* Fractions Consecration: Cathedral Nave */

.consecration-screen {
  --north: #fbbf24;
  --north-deep: #8b5d18;
  --east: #1e3a8a;
  --east-gold: #f6c84c;
  --south: #c84a2d;
  --south-green: #7a8c5a;
  --west: #5b2a86;
  --west-ruby: #8b1a3a;
  --boss-gold: #d4af37;
  color: #fff3d2;
  overflow-y: auto;
}

.consecration-topbar {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 10px;
}

.consecration-topbar div {
  min-width: 0;
  text-align: center;
}

.consecration-topbar span {
  color: var(--text-secondary);
  display: block;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.consecration-topbar strong {
  color: var(--text-primary);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  line-height: 1;
}

.consecration-topbar p {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 900;
  margin: 0;
  text-align: right;
}

.consecration-progress {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  height: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.consecration-progress span {
  background: linear-gradient(90deg, var(--north), var(--east-gold), var(--south), var(--west));
  display: block;
  height: 100%;
  transition: width 420ms ease;
}

.consecration-stage {
  background:
    radial-gradient(circle at 50% 13%, rgba(245, 214, 145, 0.24), transparent 18%),
    radial-gradient(circle at 50% 42%, rgba(105, 70, 130, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(14, 23, 44, 0.96), rgba(28, 26, 41, 0.96) 48%, rgba(46, 38, 34, 0.98));
  border: 1px solid rgba(225, 197, 126, 0.28);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  height: min(760px, calc(100vh - 126px));
  min-height: 650px;
  overflow: hidden;
  position: relative;
}

.nave-architecture {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.nave-architecture::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(242, 219, 164, 0.08) 9% 10.2%, transparent 10.2% 20%),
    radial-gradient(ellipse at 50% -6%, transparent 0 28%, rgba(233, 211, 168, 0.12) 28.5% 29.5%, transparent 30%);
  content: "";
  inset: 0;
  position: absolute;
}

.nave-architecture span {
  background: linear-gradient(180deg, rgba(222, 207, 175, 0.32), rgba(97, 81, 75, 0.3));
  border: 1px solid rgba(255, 236, 184, 0.14);
  border-radius: 42px 42px 4px 4px;
  bottom: 0;
  position: absolute;
  top: 15%;
  width: 6.5%;
}

.nave-architecture span:nth-child(1) { left: 7%; }
.nave-architecture span:nth-child(2) { left: 20%; opacity: 0.72; }
.nave-architecture span:nth-child(3) { right: 20%; opacity: 0.72; }
.nave-architecture span:nth-child(4) { right: 7%; }

.nave-candles {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.nave-candles span {
  background: linear-gradient(180deg, #f7e9c1, #7d5633);
  border-radius: 999px 999px 4px 4px;
  bottom: 18%;
  box-shadow: 0 -16px 26px rgba(255, 196, 79, 0.44);
  height: 62px;
  position: absolute;
  width: 9px;
}

.nave-candles span::before {
  background: radial-gradient(circle, #fff5b8 0 20%, #f3a929 42%, transparent 66%);
  content: "";
  height: 32px;
  left: 50%;
  position: absolute;
  top: -27px;
  transform: translateX(-50%);
  width: 28px;
}

.nave-candles span:nth-child(1) { left: 14%; }
.nave-candles span:nth-child(2) { left: 26%; bottom: 23%; }
.nave-candles span:nth-child(3) { right: 26%; bottom: 23%; }
.nave-candles span:nth-child(4) { right: 14%; }

.rose-wrap {
  left: 50%;
  position: absolute;
  top: 3%;
  transform: translateX(-50%);
  z-index: 4;
}

.rose-window {
  background: radial-gradient(circle, rgba(24, 25, 38, 0.96), rgba(7, 8, 17, 0.98));
  border: 10px solid rgba(211, 181, 112, 0.64);
  border-radius: 50%;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.82), 0 0 40px rgba(245, 214, 145, 0.1);
  height: clamp(250px, 31vw, 330px);
  overflow: hidden;
  position: relative;
  width: clamp(250px, 31vw, 330px);
}

.rose-window__lead {
  border: 4px solid rgba(227, 207, 157, 0.42);
  border-radius: 50%;
  inset: 13%;
  position: absolute;
  z-index: 5;
}

.rose-window__quadrant {
  filter: grayscale(0.78) brightness(0.34);
  inset: 0;
  opacity: 0.54;
  position: absolute;
  transition: filter 900ms ease, opacity 900ms ease, box-shadow 900ms ease;
}

.rose-window__quadrant span {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16), transparent 18%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.14) 0 8deg, transparent 8deg 18deg);
  inset: 0;
  position: absolute;
}

.rose-window__quadrant.is-lit {
  filter: grayscale(0) brightness(1.08);
  opacity: 1;
}

.rose-window__quadrant--north {
  background: linear-gradient(135deg, var(--north), var(--north-deep));
  clip-path: polygon(50% 50%, 0 0, 100% 0);
}

.rose-window__quadrant--east {
  background: linear-gradient(135deg, var(--east-gold), var(--east));
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

.rose-window__quadrant--south {
  background: linear-gradient(135deg, var(--south-green), var(--south));
  clip-path: polygon(50% 50%, 100% 100%, 0 100%);
}

.rose-window__quadrant--west {
  background: linear-gradient(135deg, var(--west), var(--west-ruby));
  clip-path: polygon(50% 50%, 0 100%, 0 0);
}

.rose-window__spokes {
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 3px), rgba(222, 201, 154, 0.78) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(0deg, transparent 0 calc(50% - 3px), rgba(222, 201, 154, 0.78) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    radial-gradient(circle, transparent 0 25%, rgba(222, 201, 154, 0.55) 25.5% 27.5%, transparent 28%);
  inset: 0;
  position: absolute;
  z-index: 6;
}

.rose-window__boss {
  background: radial-gradient(circle, #5a4221, #1a1720);
  border: 4px solid rgba(222, 201, 154, 0.78);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7);
  height: 21%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 1100ms ease, box-shadow 1100ms ease;
  width: 21%;
  z-index: 7;
}

.rose-window__boss.is-lit {
  background: radial-gradient(circle, #fff8cf 0 12%, var(--boss-gold) 13% 62%, #8a641c);
  box-shadow: 0 0 44px rgba(255, 222, 122, 0.9), inset 0 0 10px rgba(255, 255, 255, 0.45);
}

.altar {
  bottom: 12%;
  height: 260px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: min(620px, 58%);
  z-index: 5;
}

.altar__steps {
  background:
    linear-gradient(180deg, rgba(222, 207, 175, 0.3), rgba(91, 80, 76, 0.54)),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 237, 194, 0.14) 31px 34px);
  border-radius: 10px;
  bottom: 0;
  box-shadow: 0 22px 36px rgba(0, 0, 0, 0.34);
  height: 112px;
  left: 5%;
  position: absolute;
  right: 5%;
}

.altar__slab {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 242, 204, 0.16), transparent 32%),
    linear-gradient(180deg, #cfc1a2, #82756c);
  border: 1px solid rgba(255, 241, 199, 0.34);
  border-radius: 12px;
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.2), 0 24px 36px rgba(0, 0, 0, 0.3);
  height: 164px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.altar-zone {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: center;
  position: absolute;
}

.altar-zone--north { left: 28%; right: 28%; top: 8px; }
.altar-zone--east { bottom: 44px; right: 18px; top: 46px; }
.altar-zone--south { bottom: 9px; left: 28%; right: 28%; }
.altar-zone--west { bottom: 44px; left: 18px; top: 46px; }
.altar-zone--center { inset: 54px 39% 54px; }

.altar-artifact {
  align-items: center;
  background: rgba(35, 26, 25, 0.26);
  border: 1px solid rgba(255, 238, 184, 0.14);
  border-radius: 6px;
  color: rgba(255, 242, 205, 0.42);
  display: grid;
  gap: 3px;
  justify-items: center;
  min-height: 42px;
  min-width: 54px;
  opacity: 0;
  padding: 5px;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.altar-artifact.is-placed {
  opacity: 1;
  transform: translateY(0);
}

.altar-artifact.is-earned {
  color: #2b1b14;
}

.altar-artifact.is-missing {
  filter: grayscale(1);
  opacity: 0.45;
}

.altar-artifact span {
  background: #d8c18a;
  border-radius: 4px;
  display: block;
  height: 22px;
  width: 36px;
}

.altar-artifact strong {
  display: none;
}

.altar-artifact--twin-thread-banner span {
  background: linear-gradient(90deg, var(--north) 0 50%, #f7ead0 50%);
  width: 48px;
}

.altar-artifact--royal-measure span {
  background: repeating-linear-gradient(90deg, #d4a35c 0 8px, #7f5a25 8px 10px);
  height: 8px;
  width: 52px;
}

.altar-artifact--eastern-light span {
  background: linear-gradient(135deg, var(--east), var(--east-gold));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.altar-artifact--common-frame span {
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(255, 255, 255, 0.42) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 0 46%, rgba(255, 255, 255, 0.42) 46% 54%, transparent 54%),
    linear-gradient(135deg, var(--east), var(--east-gold));
}

.altar-artifact--inlaid-field span {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.24) 9px 11px),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 255, 255, 0.24) 9px 11px),
    linear-gradient(135deg, var(--south), var(--south-green));
}

.altar-artifact--whole-and-wing-tile span {
  background: linear-gradient(90deg, var(--south-green) 0 66%, #e9bd62 66%);
  border-radius: 2px 12px 12px 2px;
}

.altar-artifact--tincture-vial span {
  background: linear-gradient(180deg, transparent 0 20%, var(--west) 20% 100%);
  border: 2px solid rgba(255, 246, 213, 0.75);
  border-radius: 8px 8px 13px 13px;
  height: 34px;
  width: 20px;
}

.altar-artifact--master-recipe span {
  background: linear-gradient(180deg, #f7e8c3, #cfae73);
  border-radius: 5px;
  box-shadow: inset -10px -6px 0 rgba(139, 26, 58, 0.24);
  width: 44px;
}

.ceremony-master,
.ceremony-apprentice {
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff1d0;
  cursor: default;
  min-height: 132px;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 150px;
  z-index: 7;
}

.ceremony-master:disabled,
.ceremony-apprentice:disabled {
  color: #fff1d0;
}

.ceremony-master.is-target,
.ceremony-apprentice.is-target {
  cursor: pointer;
}

.ceremony-master.is-target::before,
.ceremony-apprentice.is-target::before {
  animation: targetPulse 1100ms ease-in-out infinite;
  border: 2px solid rgba(255, 223, 134, 0.72);
  border-radius: 999px;
  content: "";
  height: 126px;
  left: 50%;
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  width: 126px;
}

@keyframes targetPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 223, 134, 0); opacity: 0.75; }
  50% { box-shadow: 0 0 28px rgba(255, 223, 134, 0.5); opacity: 1; }
}

.ceremony-master--solen { left: 23%; top: 37%; }
.ceremony-master--aldra { right: 19%; top: 38%; }
.ceremony-master--pellan { left: 25%; bottom: 13%; }
.ceremony-master--veth { right: 22%; bottom: 12%; }

.ceremony-master__sprite,
.ceremony-apprentice__sprite {
  display: block;
  height: 92px;
  margin: 0 auto 5px;
  position: relative;
  width: 82px;
}

.ceremony-master__sprite i,
.ceremony-apprentice__sprite i {
  background: #d2a179;
  border-radius: 48% 48% 44% 44%;
  display: block;
  height: 34px;
  left: 24px;
  position: absolute;
  top: 4px;
  width: 34px;
  z-index: 2;
}

.ceremony-master__sprite b,
.ceremony-apprentice__sprite b {
  background: linear-gradient(180deg, #5d3768, #2c1c36);
  border-radius: 24px 24px 10px 10px;
  display: block;
  height: 58px;
  left: 18px;
  position: absolute;
  top: 34px;
  width: 46px;
}

.ceremony-master__sprite em,
.ceremony-apprentice__sprite em {
  background: rgba(255, 232, 168, 0.7);
  border-radius: 999px;
  display: block;
  height: 8px;
  left: 12px;
  position: absolute;
  top: 48px;
  transform: rotate(24deg);
  width: 58px;
  z-index: 3;
}

.ceremony-master--solen .ceremony-master__sprite b { background: linear-gradient(180deg, #f0c16a, #7f5726); }
.ceremony-master--aldra .ceremony-master__sprite b { background: linear-gradient(180deg, #23488e, #162a55); }
.ceremony-master--pellan .ceremony-master__sprite b { background: linear-gradient(180deg, #b95132, #5d2c1f); }
.ceremony-master--veth .ceremony-master__sprite b { background: linear-gradient(180deg, #5b2a86, #25142f); }

.ceremony-master__name,
.ceremony-apprentice strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
  text-shadow: 0 3px 9px rgba(0, 0, 0, 0.62);
}

.ceremony-master__role {
  color: rgba(255, 238, 199, 0.7);
  display: block;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ceremony-master__line {
  background: rgba(252, 241, 212, 0.96);
  border: 1px solid rgba(255, 224, 150, 0.3);
  border-radius: 8px;
  box-shadow: 0 12px 22px rgba(11, 8, 14, 0.26);
  color: #24192a;
  display: block;
  font-size: 0.8rem;
  font-weight: 900;
  left: 50%;
  line-height: 1.22;
  padding: 8px 10px;
  position: absolute;
  top: -50px;
  transform: translateX(-50%);
  width: 210px;
}

.ceremony-master__line--silent {
  color: #5b2a86;
}

.ceremony-apprentice {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.ceremony-apprentice__sprite i {
  background: #c99570;
}

.ceremony-apprentice__sprite b {
  background: linear-gradient(180deg, #39435f, #1b2034);
  border-radius: 34px 34px 12px 12px;
  height: 68px;
  left: 15px;
  width: 52px;
}

.ceremony-apprentice__sprite em {
  background: rgba(212, 175, 55, 0.72);
  top: 58px;
}

.ceremony-apprentice__bundle {
  background: linear-gradient(180deg, #f7e8c3, #cfae73);
  border-radius: 5px;
  box-shadow: inset -12px -6px 0 rgba(139, 26, 58, 0.22), 0 6px 12px rgba(0, 0, 0, 0.26);
  display: block;
  height: 26px;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 58px;
  transform: translateX(-50%) rotate(-5deg);
  transition: opacity 300ms ease;
  width: 54px;
}

.ceremony-apprentice.has-placed .ceremony-apprentice__bundle {
  opacity: 0;
}

.ceremony-apprentice.is-lit .ceremony-apprentice__sprite {
  filter: drop-shadow(0 0 22px rgba(255, 223, 134, 0.7));
}

.consecration-cue {
  background: rgba(18, 18, 31, 0.86);
  border: 1px solid rgba(255, 224, 153, 0.28);
  border-radius: 8px;
  bottom: 22px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.34);
  left: 4%;
  max-width: min(500px, 44%);
  padding: 13px 15px;
  position: absolute;
  z-index: 9;
}

.consecration-cue span {
  color: rgba(255, 224, 153, 0.76);
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.consecration-cue h1 {
  color: #fff3d2;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 0.98;
  margin: 2px 0 6px;
}

.consecration-cue p {
  color: rgba(255, 238, 205, 0.86);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

.consecration-cue strong {
  color: #ffe29a;
  display: block;
  font-size: 0.82rem;
  margin-top: 9px;
  text-transform: uppercase;
}

.consecration-title-card {
  align-items: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 218, 122, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(13, 17, 32, 0.98), rgba(31, 25, 43, 0.98));
  border: 1px solid rgba(225, 197, 126, 0.34);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  height: min(760px, calc(100vh - 126px));
  justify-content: center;
  min-height: 650px;
  overflow: hidden;
  padding: 34px;
  position: relative;
  text-align: center;
}

.consecration-title-card > span {
  color: rgba(255, 224, 153, 0.76);
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.consecration-title-card p {
  color: #fff1cc;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 3rem);
  line-height: 1.05;
  margin: 12px 0 6px;
}

.consecration-title-card h1 {
  color: #ffe6a6;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: 0.04em;
  line-height: 0.88;
  margin: 0 0 18px;
  text-shadow: 0 0 34px rgba(255, 215, 122, 0.4);
}

.consecration-stars {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 22px;
}

.consecration-stars span {
  color: rgba(255, 255, 255, 0.22);
  font-size: 2rem;
}

.consecration-stars span.is-filled {
  color: #fbbf24;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.45);
}

.consecration-title-card__dust {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.consecration-title-card__dust span {
  animation: titleDust 4200ms ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 232, 156, 0.9), transparent 70%);
  border-radius: 50%;
  height: 90px;
  position: absolute;
  width: 90px;
}

.consecration-title-card__dust span:nth-child(1) { left: 10%; top: 18%; }
.consecration-title-card__dust span:nth-child(2) { animation-delay: 500ms; right: 12%; top: 20%; }
.consecration-title-card__dust span:nth-child(3) { animation-delay: 900ms; bottom: 18%; left: 22%; }
.consecration-title-card__dust span:nth-child(4) { animation-delay: 1400ms; bottom: 16%; right: 24%; }

@keyframes titleDust {
  0%, 100% { opacity: 0.24; transform: translateY(0) scale(0.92); }
  50% { opacity: 0.58; transform: translateY(-18px) scale(1.08); }
}

@media (max-width: 1040px) {
  .consecration-stage,
  .consecration-title-card {
    height: auto;
    min-height: 860px;
  }

  .altar {
    bottom: 18%;
    width: 72%;
  }

  .ceremony-master--solen { left: 13%; top: 36%; }
  .ceremony-master--aldra { right: 10%; top: 36%; }
  .ceremony-master--pellan { left: 12%; bottom: 13%; }
  .ceremony-master--veth { right: 12%; bottom: 13%; }

  .consecration-cue {
    bottom: 18px;
    max-width: 62%;
  }
}

@media (max-width: 760px) {
  .consecration-topbar {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .consecration-topbar p {
    text-align: center;
  }

  .consecration-stage,
  .consecration-title-card {
    min-height: 980px;
  }

  .rose-wrap {
    top: 4%;
  }

  .altar {
    bottom: 28%;
    width: 88%;
  }

  .ceremony-master,
  .ceremony-apprentice {
    transform: scale(0.86);
  }

  .ceremony-master--solen { left: 1%; top: 38%; }
  .ceremony-master--aldra { right: 1%; top: 38%; }
  .ceremony-master--pellan { left: 1%; bottom: 16%; }
  .ceremony-master--veth { right: 1%; bottom: 16%; }

  .ceremony-apprentice {
    bottom: 6%;
    transform: translateX(-50%) scale(0.9);
  }

  .consecration-cue {
    bottom: 14px;
    left: 4%;
    max-width: none;
    right: 4%;
  }

  .consecration-title-card {
    padding: 24px 16px;
  }
}

/* Fractions publishability fix: clearer premium nave and unobstructed ceremony targets */
.consecration-stage {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 231, 166, 0.34), transparent 18%),
    radial-gradient(ellipse at 50% 45%, rgba(47, 86, 142, 0.22), transparent 35%),
    radial-gradient(ellipse at 50% 104%, rgba(198, 101, 49, 0.28), transparent 44%),
    linear-gradient(180deg, rgba(10, 22, 46, 0.98), rgba(22, 26, 44, 0.98) 47%, rgba(55, 39, 31, 0.98));
}

.consecration-stage::after {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 226, 161, 0.08) 18% 19%, transparent 19% 81%, rgba(255, 226, 161, 0.08) 81% 82%, transparent 82%),
    radial-gradient(ellipse at 50% 78%, rgba(255, 218, 140, 0.16), transparent 54%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.rose-wrap,
.altar,
.nave-architecture,
.nave-candles {
  pointer-events: none;
}

.altar {
  bottom: 10%;
  width: min(600px, 54%);
}

.ceremony-master,
.ceremony-apprentice {
  z-index: 10;
}

.ceremony-master--solen { left: 20%; top: 36%; }
.ceremony-master--aldra { right: 17%; top: 36%; }
.ceremony-master--pellan { left: 20%; bottom: 10%; }
.ceremony-master--veth { right: 19%; bottom: 10%; }

.ceremony-apprentice {
  bottom: 4%;
}

.ceremony-master__sprite,
.ceremony-apprentice__sprite {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.34));
}

.ceremony-master__name,
.ceremony-apprentice strong {
  background: rgba(14, 18, 31, 0.56);
  border: 1px solid rgba(255, 224, 153, 0.18);
  border-radius: 999px;
  display: inline-block;
  padding: 4px 9px;
}

.consecration-cue {
  bottom: auto;
  left: 18px;
  max-width: min(360px, 34%);
  padding: 11px 13px;
  pointer-events: none;
  top: 18px;
  z-index: 8;
}

.consecration-cue h1 {
  font-size: clamp(1.25rem, 2.15vw, 1.95rem);
}

.consecration-cue p {
  font-size: 0.82rem;
}

.consecration-cue strong {
  font-size: 0.76rem;
}

@media (max-width: 1040px) {
  .altar {
    bottom: 18%;
    width: 70%;
  }

  .ceremony-master--solen { left: 10%; top: 36%; }
  .ceremony-master--aldra { right: 8%; top: 36%; }
  .ceremony-master--pellan { left: 9%; bottom: 13%; }
  .ceremony-master--veth { right: 10%; bottom: 13%; }

  .consecration-cue {
    max-width: min(340px, 38%);
  }
}

@media (max-width: 760px) {
  .consecration-stage,
  .consecration-title-card {
    min-height: 1040px;
  }

  .consecration-cue {
    left: 14px;
    max-width: none;
    right: 14px;
    top: 12px;
  }

  .rose-wrap {
    top: 14%;
  }

  .altar {
    bottom: 28%;
    width: 88%;
  }

  .ceremony-master--solen { left: 0; top: 43%; }
  .ceremony-master--aldra { right: 0; top: 43%; }
  .ceremony-master--pellan { left: 0; bottom: 16%; }
  .ceremony-master--veth { right: 0; bottom: 16%; }
}