/* Realms of Elynia — forge-rituaalin ulkoasu (lataus, säteily, reveal, reroll-
   vertailu). OMA tiedosto, koska sekä peli (index.html) ETTÄ wikin Forge-
   simulaattori lataavat sen: rituaalin pitää näyttää ja tuntua identtiseltä
   molemmissa, eikä sitä saa ylläpitää kahtena kopiona.

   .sheet-backdrop on KOPIO styles.css:stä. Alkuperäinen jää sinne, koska
   muutkin modaalit nojaavat siihen (character-sheet, character, forge,
   professions); peli lataa molemmat tiedostot ja säännöt ovat identtiset,
   wiki saa taustan vain täältä. */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(36, 28, 18, .55);
}

/* ============================================================ Ascension ritual */
.forge-ascend .ascend-info { margin: 4px 0 12px; font-size: 14px; color: var(--night-text, #EDE4CF); }
.ascend-fervor { color: var(--gold); font-weight: 700; }
.ascend-plus { color: var(--rarity-uncommon); font-weight: 700; }
.ascend-cap { color: var(--night-text, #EDE4CF); opacity: .75; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }

.ascend-backdrop {
  display: flex; align-items: center; justify-content: center;
  /* forge.jpg näkyy himmeänä rituaalin takana (sama alttari mistä juuri
     klikkasit) — tumma radial-gradient scrim päällä pitää kortin luettavana. */
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(20,14,6,.86), rgba(10,7,3,.95)),
    url('/assets/scenes/forge.jpg');
  background-size: cover, cover;
  background-position: center, center 30%;
}

/* Rituaali kiinnitetään suoraan bodyyn, joten Forge-remasterin rajaus ei yllä
   tänne. Sama 26.8. nauhanappi toistetaan rituaalin omassa rajauksessa: näin
   facelift pysyy itsenäisenä eikä muuta muun pelin painikkeita. */
.ascend-backdrop .btn {
  --btn-inset: 6px;
  --btn-band-top: #57431f;
  --btn-band-bot: #3b2d14;
  --btn-edge: rgba(201, 162, 75, .55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  color: #f2d98b;
  background:
    linear-gradient(var(--btn-edge), var(--btn-edge)) no-repeat center top var(--btn-inset) / 100% 1px,
    linear-gradient(var(--btn-edge), var(--btn-edge)) no-repeat center bottom var(--btn-inset) / 100% 1px,
    linear-gradient(180deg, var(--btn-band-top), var(--btn-band-bot)) no-repeat center / 100% calc(100% - var(--btn-inset) * 2);
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px rgba(20, 14, 8, .7);
  text-transform: uppercase;
}
.ascend-backdrop .btn:focus-visible { outline-offset: calc(var(--btn-inset) * -1); }
.ascend-backdrop .btn:hover:not(:disabled) {
  --btn-band-top: #6a5326;
  --btn-band-bot: #4a3919;
  --btn-edge: var(--gold);
}
.ascend-backdrop .btn:active {
  --btn-band-top: #3b2d14;
  --btn-band-bot: #2a2011;
  transform: translateY(1px);
}
.ascend-backdrop .btn:disabled {
  --btn-band-top: rgba(36, 28, 18, .55);
  --btn-band-bot: rgba(36, 28, 18, .55);
  --btn-edge: var(--night-line);
  color: #8a7a5f;
  cursor: not-allowed;
  text-shadow: none;
  transform: none;
}
.ascend-backdrop .btn-ghost {
  --btn-band-top: transparent;
  --btn-band-bot: transparent;
  --btn-edge: var(--bronze);
  color: var(--night-text);
  text-shadow: none;
}
.ascend-backdrop .btn-ghost:hover:not(:disabled) {
  --btn-band-top: rgba(201, 162, 75, .12);
  --btn-band-bot: rgba(201, 162, 75, .12);
  --btn-edge: var(--gold);
}
.ascend-backdrop .btn-primary {
  --btn-band-top: #e0bc6a;
  --btn-band-bot: #c9922c;
  --btn-edge: var(--bronze);
  color: var(--night);
  filter: none;
  text-shadow: none;
}
.ascend-backdrop .btn-primary:hover:not(:disabled) {
  --btn-band-top: #ebcc81;
  --btn-band-bot: #d4a038;
  --btn-edge: var(--bronze-deep);
}
.ascend-backdrop .btn-primary:active { --btn-band-top: #d4a038; --btn-band-bot: #b8841f; }
.ascend-backdrop .btn-primary:focus-visible { outline-color: #24180a; }

.ascend-stage {
  position: relative; width: min(760px, 94vw); max-height: 92vh; padding: 26px 22px 22px; text-align: center;
  border: 1px solid var(--bronze); border-radius: 10px; overflow-x: hidden; overflow-y: auto;
  background: linear-gradient(180deg, #2A2114, #1A140C);
  box-shadow: 0 10px 44px rgba(0,0,0,.6);
}
.ascend-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ascend-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .03em; }
.ascend-arrow { font-size: 14px; color: var(--night-text); }

.ritual-convergence {
  display: grid; grid-template-columns: 150px 220px; justify-content: center;
  align-items: center; gap: 28px; min-height: 228px; margin: 4px auto;
}
.ritual-convergence.no-offering { grid-template-columns: 220px; }
.ritual-offering { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.ritual-offering > span,
.ritual-product-kicker {
  color: var(--gold); font-family: var(--font-display); font-size: 9px;
  font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}
.ritual-offering > img { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 7px 7px #000); }
.ritual-offering > b { color: var(--night-text); font-size: 12px; }
.ascend-core { position: relative; width: 210px; height: 210px; margin: 4px auto; display: grid; place-items: center; }
.ascend-glow {
  position: absolute; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,75,.95), rgba(201,162,75,.18) 60%, transparent 72%);
  filter: blur(2px); opacity: .45;
}
.ascend-ring { position: absolute; width: 184px; height: 184px; border-radius: 50%; border: 2px dashed rgba(201,162,75,.5); opacity: .5; }
.ascend-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: 0; }
.ritual-item-image {
  position: relative; z-index: 2; width: 76%; height: 82%; object-fit: contain;
  filter: drop-shadow(0 13px 10px rgba(0,0,0,.9)) drop-shadow(0 0 12px rgba(201,162,75,.26));
}
.ritual-item-fallback { position: relative; z-index: 2; display: grid; place-items: center; width: 118px; height: 118px; }
.ritual-item-fallback img { width: 86px; height: 86px; object-fit: contain; }

.ascend-bar { height: 8px; border-radius: 5px; margin: 14px auto 2px; width: 82%; background: rgba(0,0,0,.4); border: 1px solid var(--bronze); overflow: hidden; }
.ascend-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--bronze), var(--gold)); box-shadow: 0 0 10px var(--gold); }

.ascend-stage.charging .ascend-fill { animation: ascend-fill 1.8s cubic-bezier(.45,.05,.55,1) forwards; }
.ascend-stage.charging .ascend-glow { animation: ascend-pulse .55s ease-in-out infinite alternate; }
.ascend-stage.charging .ascend-ring { animation: ascend-spin 2.2s linear infinite; }
.ascend-stage.charging .ritual-item-image { animation: ritual-item-charge 1.8s ease-in-out infinite; }
@keyframes ascend-fill { from { width: 0; } to { width: 100%; } }
@keyframes ascend-pulse { from { opacity: .45; transform: scale(.85); } to { opacity: 1; transform: scale(1.28); } }
@keyframes ascend-spin { to { transform: rotate(360deg); } }
@keyframes ritual-item-charge { 50% { transform: scale(1.07); filter: drop-shadow(0 9px 8px #000) drop-shadow(0 0 24px var(--gold)); } }

.ascend-stage.reveal-success .ascend-glow { opacity: 1; animation: ascend-burst .7s ease-out forwards; }
.ascend-stage.reveal-success .ascend-ring { border-color: var(--gold); opacity: 1; box-shadow: 0 0 24px var(--gold); }
@keyframes ascend-burst { 0% { transform: scale(.6); opacity: 1; } 60% { transform: scale(2.4); opacity: .9; } 100% { transform: scale(3.3); opacity: 0; } }
.ascend-stage.reveal-success::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: ascend-flash .6s ease-out forwards; }
@keyframes ascend-flash { 0% { box-shadow: inset 0 0 0 rgba(201,162,75,0); } 25% { box-shadow: inset 0 0 70px rgba(201,162,75,.6); } 100% { box-shadow: inset 0 0 0 rgba(201,162,75,0); } }

.ascend-stage.reveal-fail .ascend-glow { opacity: .15; transform: scale(.6); background: radial-gradient(circle, rgba(150,60,50,.5), transparent 65%); transition: all .5s; }
.ascend-stage.reveal-fail .ascend-ring { border-color: rgba(150,70,60,.5); opacity: .3; }

.ascend-result { min-height: 40px; margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* VÄRI SANOTAAN ÄÄNEEN. .ascend-stage on tumma (#2A2114 -> #1A140C) mutta ei
   aseta color:ia, joten viesti peri bodyn --inkin (#2B2118) — käytännössä
   saman sävyn kuin tausta. Fail-rivi oli ainoa jolla oli oma väri, eli se
   ainoa joka näkyi. Sama ansa kuin imm-cardilla: tumma pinta -> --night-text
   tai --gold, EI --ink. */
.ascend-msg { margin: 0; font-size: 16px; color: var(--night-text, #EDE4CF); }
.ascend-msg.success {
  color: var(--gold); font-family: var(--font-display); font-weight: 700;
  font-size: 21px; letter-spacing: .05em; text-shadow: 0 0 18px rgba(201,162,75,.28);
}
.ascend-msg.fail { color: #D9B7A9; font-size: 14px; }
.ascend-done { min-width: 140px; min-height: 42px; }

/* Onnistumisen lopputuote: item on sankari, mutta ennen/jälkeen-rivit kertovat
   täsmälleen mitä serverin vastaus muutti. Rarity käyttää pelin kanonista väriä. */
.ritual-product {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px;
  align-items: center; width: 100%; padding: 14px;
  background: rgba(14,10,5,.62); border: 1px solid rgba(201,162,75,.34);
  box-shadow: inset 0 0 34px rgba(201,162,75,.06);
}
.ritual-product-art {
  display: grid; place-items: center; min-height: 180px;
  background: radial-gradient(circle, rgba(201,162,75,.20), transparent 67%);
}
.ritual-product-image {
  width: 160px; height: 176px; object-fit: contain;
  filter: drop-shadow(0 12px 10px #000) drop-shadow(0 0 18px rgba(238,190,88,.62));
  animation: ritual-product-arrive .72s cubic-bezier(.2,.82,.24,1.1) both;
}
.ritual-product-copy { min-width: 0; text-align: left; }
.ritual-product-copy > strong { display: block; margin: 2px 0 10px; font: 700 22px var(--font-display); }
.ritual-stat-compare { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 8px; align-items: center; }
.ritual-stat-col { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--night-line); }
.ritual-stat-col > span {
  padding: 4px 7px; color: var(--night-muted, #b7a98c); background: rgba(44,33,19,.62);
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
}
.ritual-stat-col > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 7px; border-top: 1px solid var(--night-line); }
.ritual-stat-col small { color: var(--night-muted, #b7a98c); }
.ritual-stat-col b { color: var(--night-text); font-size: 11px; }
.ritual-stat-col em { margin-left: 3px; color: var(--rarity-uncommon); font-size: 9px; font-style: normal; }
.ritual-stat-arrow { color: var(--gold); text-align: center; }
.ritual-product-affixes { display: grid; gap: 5px; margin-top: 8px; }
.ritual-product-affixes > small { color: var(--night-muted, #b7a98c); text-transform: uppercase; }
.ritual-product-affixes > span { display: flex; flex-wrap: wrap; gap: 5px; }
.ritual-product-affix { padding: 3px 7px; color: var(--rarity-uncommon); border: 1px solid var(--night-line); font-size: 10px; }
.ritual-product-affix.is-new { border-color: rgba(201,162,75,.46); }
.ritual-product-affix i { margin-left: 5px; color: var(--gold); font-size: 8px; font-style: normal; text-transform: uppercase; }
@keyframes ritual-product-arrive {
  from { opacity: 0; transform: translateY(-24px) scale(1.22); filter: brightness(2.3) drop-shadow(0 0 30px #ffe9ad); }
  to { opacity: 1; transform: none; }
}

/* Reroll keep/take -päätös: nykyiset vs uudet affiksit + kaksi valintaa. */
.reroll-decide { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.reroll-compare {
  display: flex; align-items: stretch; justify-content: center; gap: 12px;
  flex-wrap: wrap; width: 100%;
}
.reroll-col {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--night-line); border-radius: 8px;
  background: rgba(20, 15, 8, .4); min-width: 120px;
}
.reroll-col-title {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--night-muted, #b7a98c);
}
.reroll-col .ritual-affixes { margin-left: 0; flex-direction: column; gap: 4px; }
.reroll-col .ritual-affixes .stat-line__item { padding: 3px 0; border-inline-start: 0; }
.reroll-col .ritual-affixes .stat-line__item + .stat-line__item { border-block-start: 1px solid var(--info-line, var(--night-line)); }
.reroll-none { opacity: .6; font-style: italic; }
.reroll-arrow { align-self: center; font-size: 20px; color: var(--bronze); }
.reroll-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.reroll-take, .reroll-keep { min-width: 140px; min-height: 42px; }
.reroll-note { margin: 0; font-size: 12px; color: var(--night-muted, #b7a98c); }
.reroll-err { margin: 4px 0 0; font-size: 13px; color: #D9B7A9; }
.ascend-mute {
  position: absolute; top: 8px; right: 10px; background: transparent; border: 1px solid var(--bronze);
  color: var(--night-text); border-radius: 4px; font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.ascend-mute[aria-pressed="true"] { opacity: .5; }

@media (max-width: 620px) {
  .ritual-convergence { grid-template-columns: 90px 170px; gap: 10px; min-height: 190px; }
  .ritual-convergence.no-offering { grid-template-columns: 180px; }
  .ritual-offering > img { width: 60px; height: 60px; }
  .ascend-core { width: 170px; height: 170px; }
  .ascend-ring { width: 148px; height: 148px; }
  .ritual-product { grid-template-columns: 1fr; }
  .ritual-product-art { min-height: 145px; }
  .ritual-product-image { width: 132px; height: 142px; }
}

@media (prefers-reduced-motion: reduce) {
  .ascend-stage.charging .ascend-fill { animation: none; width: 100%; }
  .ascend-stage.charging .ascend-glow, .ascend-stage.charging .ascend-ring,
  .ascend-stage.charging .ritual-item-image, .ritual-product-image,
  .ascend-stage.reveal-success .ascend-glow, .ascend-stage.reveal-success::after { animation: none; }
}

/* ============================================================ Ceremonial remaster
   The approved Facelift/Forge Runic Convergence sequence, now driven by the
   production API response. Loading, item arrival and stat disclosure are three
   separate beats: the result is never shown before the server has decided it. */
.ascend-backdrop {
  --ritual-accent: #69cbc8;
  --ritual-accent-soft: rgba(105,203,200,.25);
  --ritual-accent-faint: rgba(105,203,200,.10);
  --ritual-wave: #c99a45;
  --ritual-wave-bright: #efddb0;
  --ritual-wave-soft: rgba(201,154,69,.32);
  --ritual-wave-faint: rgba(201,154,69,.11);
  z-index: 95;
  padding: 0;
  overflow: hidden;
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(8,6,3,.77), rgba(3,2,1,.96)),
    url('/assets/scenes/forge.jpg');
}
.ascend-backdrop[data-ritual="reroll"] {
  --ritual-accent: #d7a44a;
  --ritual-accent-soft: rgba(215,164,74,.25);
  --ritual-accent-faint: rgba(215,164,74,.10);
}
/* ASCEND VÄRITTYY ESINEEN OMAN RARITYN MUKAAN, ei kiinteästi.
   Tässä oli #bd81e8 — käytännössä --rarity-epic (#AE6BF0). Rituaali on koko
   ruudun kokoinen ja rarity on juuri se asia jota ollaan muuttamassa, joten
   violetti lavastus luki "epic" myös silloin kun alasimella oli valkoinen
   common: pelaaja näki epic-hehkuisen esineen ennen kuin arpa oli heitetty.
   Väri seuraa nyt LÄHTÖrarityä — sitä mikä esine oikeasti on sillä hetkellä.
   Onnistuessa openForgeRitual vaihtaa data-rarityn tulokseen, jolloin väri
   vaihtuu vasta kun vaihtuminen on totta (ja se on koko palkinto). */
/* ARKUN AVAUS jakaa saman taulun: latauksen ajan arkulla ei ole rarityä
   (data-rarity putoaa 'commoniin'), ja openForgeRitual vaihtaa sen vasta kun
   palvelin on kertonut mitä sisällä oli. Sinetöity laatikko ei siis missään
   vaiheessa hehku rarityä jota se ei ole — sama sääntö kuin ascendilla, ja
   maksullisella arkulla se on sitäkin tärkeämpi. */
.ascend-backdrop[data-ritual="ascend"][data-rarity="common"],
.ascend-backdrop[data-ritual="cache"][data-rarity="common"] {
  --ritual-accent: #F2EFE8;
  --ritual-accent-soft: rgba(242,239,232,.22);
  --ritual-accent-faint: rgba(242,239,232,.09);
}
.ascend-backdrop[data-ritual="ascend"][data-rarity="uncommon"],
.ascend-backdrop[data-ritual="cache"][data-rarity="uncommon"] {
  --ritual-accent: #57B558;
  --ritual-accent-soft: rgba(87,181,88,.25);
  --ritual-accent-faint: rgba(87,181,88,.10);
}
.ascend-backdrop[data-ritual="ascend"][data-rarity="rare"],
.ascend-backdrop[data-ritual="cache"][data-rarity="rare"] {
  --ritual-accent: #4E90E2;
  --ritual-accent-soft: rgba(78,144,226,.25);
  --ritual-accent-faint: rgba(78,144,226,.10);
}
.ascend-backdrop[data-ritual="ascend"][data-rarity="epic"],
.ascend-backdrop[data-ritual="cache"][data-rarity="epic"] {
  --ritual-accent: #AE6BF0;
  --ritual-accent-soft: rgba(174,107,240,.25);
  --ritual-accent-faint: rgba(174,107,240,.10);
}
.ascend-backdrop[data-ritual="ascend"][data-rarity="legendary"],
.ascend-backdrop[data-ritual="cache"][data-rarity="legendary"] {
  --ritual-accent: #F5921F;
  --ritual-accent-soft: rgba(245,146,31,.25);
  --ritual-accent-faint: rgba(245,146,31,.10);
}
.ascend-backdrop[data-ritual="ascend"][data-rarity="mythic"],
.ascend-backdrop[data-ritual="cache"][data-rarity="mythic"] {
  --ritual-accent: #F04E42;
  --ritual-accent-soft: rgba(240,78,66,.25);
  --ritual-accent-faint: rgba(240,78,66,.10);
}
.ascend-backdrop .ascend-stage {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ascend-backdrop .ascend-stage.ritual-revealing {
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}
.ascend-backdrop .ascend-stage.ritual-revealing::after { content: none; }
.ritual-loading-phase {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(3,2,1,.77);
  backdrop-filter: blur(8px);
}
.ritual-loading-phase[hidden],
.ritual-reveal-phase[hidden] { display: none; }
.ritual-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 24%, rgba(0,0,0,.72) 80%);
}
.ritual-loading-content {
  position: relative;
  z-index: 3;
  width: min(760px, 82vw);
  text-align: center;
  transform: translateY(-2.2dvh);
}
.ritual-overline,
.ritual-result-kicker {
  margin: 0 0 6px;
  color: var(--ritual-accent);
  font: 700 10px var(--font-display);
  letter-spacing: .23em;
  text-transform: uppercase;
}
.ritual-action-title {
  margin: 14px 0 10px;
  color: #f3ddb0;
  font: 700 clamp(25px, 3vw, 34px) var(--font-display);
  letter-spacing: .08em;
  text-shadow: 0 0 22px var(--ritual-accent-soft);
  text-transform: uppercase;
}
.ascend-backdrop .ritual-convergence {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 232px minmax(0,1fr);
  align-items: center;
  gap: 0;
  width: 660px;
  max-width: 100%;
  min-height: 260px;
  margin: auto;
}
.ascend-backdrop .ritual-convergence.no-offering .ritual-channel { display: none; }
.ascend-backdrop .ritual-offering,
.ascend-backdrop .ritual-item { display: grid; justify-items: center; gap: 7px; min-width: 0; }
.ascend-backdrop .ritual-offering {
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: stretch;
  padding-right: 92px;
}
.ascend-backdrop .ritual-item {
  z-index: auto;
  grid-column: 2;
  grid-row: 1;
}
.ascend-backdrop .ritual-offering > span,
.ascend-backdrop .ritual-item > span {
  color: #81745e;
  font: 9px var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ascend-backdrop .ritual-offering > img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px #000) drop-shadow(0 0 12px var(--ritual-accent-soft));
  animation: ritual-offering-float 1.6s ease-in-out infinite;
}
.ascend-backdrop .ritual-offering > b,
.ascend-backdrop .ritual-item > b {
  max-width: 190px;
  overflow: hidden;
  color: #cfbea0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ritual-item-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 232px;
  height: 232px;
  overflow: visible;
  border: 1px solid var(--ritual-accent);
  border-radius: 50%;
  background: radial-gradient(circle, var(--ritual-accent-soft), transparent 68%);
  box-shadow: 0 0 42px var(--ritual-accent-soft);
}
.ritual-grand-orbit {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(690px, 84vw, 84vh);
  width: min(690px, 84vw, 84dvh);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%,-50%);
}
.ritual-grand-orbit::before,
.ritual-grand-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid var(--ritual-accent);
  border-radius: 50%;
}
.ritual-grand-orbit::before {
  inset: 35px;
  opacity: .48;
  box-shadow: 0 0 80px var(--ritual-accent-faint), inset 0 0 70px var(--ritual-accent-faint);
  animation: ritual-ring-turn 16s linear infinite;
}
.ritual-grand-orbit::after {
  content: "✦  ᚠ  ✧  ᚱ  ✦  ᛟ  ✧  ᚨ  ✦  ᛞ  ✧  ᛉ";
  inset: 0;
  border-style: dashed;
  color: var(--ritual-accent);
  font-size: 18px;
  letter-spacing: 18px;
  line-height: 54px;
  opacity: .38;
  text-align: center;
  animation: ritual-ring-turn 24s linear infinite reverse;
}
.ritual-item-ring::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px dashed var(--ritual-accent);
  border-radius: 50%;
  opacity: .35;
  animation: ritual-ring-turn 10s linear infinite;
}
.ritual-item-ring .ritual-item-image {
  width: 184px;
  height: 204px;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px #000) drop-shadow(0 0 15px var(--ritual-accent));
  animation: ritual-item-charge 2.8s ease-in-out infinite;
}
.ritual-channel {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: 92px;
  height: 80px;
}
.ritual-channel::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ritual-accent), transparent);
  box-shadow: 0 0 9px var(--ritual-accent);
}
.ritual-channel i {
  position: absolute;
  left: 15%;
  top: 47%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ritual-accent);
  box-shadow: 0 0 12px var(--ritual-accent);
  animation: ritual-essence-travel 1.25s linear infinite;
}
.ritual-channel i:nth-child(2) { animation-delay: -.4s; }
.ritual-channel i:nth-child(3) { animation-delay: -.8s; }
.ritual-channel span {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--ritual-accent);
  font-size: 24px;
  transform: translate(-50%,-50%);
  text-shadow: 0 0 14px var(--ritual-accent);
}
.ritual-target {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 18px auto 12px;
  color: #c5b596;
  font-size: 13px;
}
/* Tavoiteluku saa lavastuksen accent-värin — PAITSI kun se on rarity-nimi,
   jolla on jo pelin kanoninen väri. Ilman poikkeusta "Common → Uncommon"
   maalautui accentilla, eli ascendin vanhalla kiinteällä violetilla: rivi
   nimesi uncommonin ja näytti epicin. Enchantin "+2" ja muut accentittomat
   luvut käyttäytyvät ennallaan. */
.ritual-target b:not([class*="rarity-"]) { color: var(--ritual-accent); }
.ascend-backdrop .ascend-bar {
  position: relative;
  width: 680px;
  max-width: 92%;
  height: 14px;
  margin: 10px auto 3px;
  overflow: visible;
  border: 1px solid var(--ritual-wave-soft);
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      transparent 0 33.2%, var(--ritual-wave-soft) 33.2% 33.5%,
      transparent 33.5% 66.5%, var(--ritual-wave-soft) 66.5% 66.8%, transparent 66.8% 100%),
    rgba(0,0,0,.78);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.58), inset 0 0 16px #000, 0 0 18px var(--ritual-wave-faint);
}
.ascend-backdrop .ascend-fill {
  position: relative;
  overflow: visible;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 112px 24px at 100% 50%, rgba(239,221,176,.28), var(--ritual-wave-soft) 36%, transparent 72%),
    linear-gradient(90deg, rgba(42,29,15,.94), rgba(102,69,25,.72) 58%, var(--ritual-wave-soft));
  box-shadow: 0 0 9px var(--ritual-wave-soft), inset 0 1px rgba(239,221,176,.20);
}
.ascend-backdrop .ascend-fill::before {
  content: "";
  position: absolute;
  inset: 1px 0;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(112deg,
      transparent 0 20px,
      rgba(239,221,176,.06) 20px 22px,
      rgba(239,221,176,.18) 23px,
      transparent 27px 38px);
  background-size: 76px 100%;
}
.ascend-backdrop .ascend-fill::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -13px;
  top: 50%;
  width: 30px;
  height: 32px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 14% 50%,
      transparent 0 39%,
      var(--ritual-wave-bright) 41% 44%,
      var(--ritual-wave) 47% 53%,
      var(--ritual-wave-soft) 57% 64%,
      transparent 69%);
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(226,190,105,.48)) drop-shadow(0 0 10px rgba(177,125,43,.24));
  transform: translateY(-50%);
  transform-origin: 36% 50%;
}
.ascend-backdrop .ascend-stage.charging .ascend-fill { animation: ritual-progress 5.6s cubic-bezier(.2,.65,.25,1) forwards; }
.ascend-backdrop .ascend-stage.charging .ascend-fill::before { opacity: .58; animation: ritual-wave-current 1.25s linear infinite; }
.ascend-backdrop .ascend-stage.charging .ascend-fill::after { opacity: .84; animation: ritual-wave-crest .88s ease-in-out infinite alternate; }
.ritual-steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  width: 590px;
  max-width: 96%;
  margin: 13px auto 7px;
  padding: 0;
  list-style: none;
  counter-reset: ritual-step;
}
.ritual-steps li {
  color: #6f6657;
  font: 9px var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: color .25s;
}
.ritual-steps li::before {
  counter-increment: ritual-step;
  content: "0" counter(ritual-step);
  display: block;
  margin-bottom: 3px;
  color: #4e493f;
  font-size: 8px;
}
.ritual-steps li.is-active,
.ritual-steps li.is-complete { color: var(--ritual-accent); }
.ritual-current { min-height: 18px; margin: 0; color: #ddceb0; font-size: 13px; font-style: italic; }
.ritual-sparks i {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 72%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ritual-accent);
  box-shadow: 0 0 10px var(--ritual-accent);
  animation: ritual-spark-rise 2.4s ease-out infinite;
}
.ritual-sparks i:nth-child(2) { left: 43%; animation-delay: -.4s; }
.ritual-sparks i:nth-child(3) { left: 56%; animation-delay: -.8s; }
.ritual-sparks i:nth-child(4) { left: 47%; animation-delay: -1.2s; }
.ritual-sparks i:nth-child(5) { left: 53%; animation-delay: -1.6s; }
.ritual-sparks i:nth-child(6) { left: 40%; animation-delay: -2s; }

/* Result beat: flash first, then the item drops onto a physical pedestal. */
.ascend-backdrop.ritual-result-success::before,
.ascend-backdrop.ritual-result-success::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}
.ascend-backdrop.ritual-result-success::before {
  background: radial-gradient(circle, rgba(255,238,185,.88), rgba(235,164,41,.28) 23%, transparent 60%);
  animation: ritual-screen-gold-flash 1.1s ease-out both;
}
.ascend-backdrop.ritual-result-success::after {
  content: "✦";
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  color: rgba(255,213,112,.18);
  font-size: min(92vw,850px);
  line-height: 1;
  text-shadow: 0 0 100px rgba(255,184,43,.38);
  transform: translate(-50%,-50%);
  animation: ritual-victory-radiance 2.2s ease-out both;
}
.ritual-reveal-phase {
  position: relative;
  z-index: 4;
  width: min(760px, 94vw);
  max-height: calc(100dvh - 40px);
  padding: 30px 36px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(218,167,66,.62);
  background: radial-gradient(circle at 50% 0, rgba(122,79,19,.35), transparent 42%), #100c07;
  box-shadow: 0 30px 100px #000, 0 0 70px rgba(241,184,60,.18), inset 0 0 55px rgba(208,139,27,.10);
  scrollbar-color: rgba(201,162,75,.48) rgba(0,0,0,.24);
  scrollbar-width: thin;
  text-align: center;
  animation: ritual-success-arrive .55s cubic-bezier(.16,.8,.25,1) both;
}
.ritual-reveal-phase::-webkit-scrollbar { width: 8px; }
.ritual-reveal-phase::-webkit-scrollbar-track { background: rgba(0,0,0,.24); }
.ritual-reveal-phase::-webkit-scrollbar-thumb { background: rgba(201,162,75,.48); border-radius: 8px; }
.ritual-reveal-phase::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(216,171,77,.16);
  pointer-events: none;
}
.ritual-result-sigil {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(112,71,15,.45);
  color: #f1d698;
  font-size: 26px;
  box-shadow: 0 0 30px rgba(231,171,48,.3);
  animation: ritual-success-sigil .9s ease-in-out infinite alternate;
}
.ritual-result-fail .ritual-result-sigil { border-color: #736c60; color: #aaa194; box-shadow: none; animation: none; }
.ritual-result-title {
  margin: 0;
  color: #f1d698;
  font: 700 clamp(27px, 3.2vw, 38px) var(--font-display);
  letter-spacing: .03em;
}
.ritual-reveal-phase .ascend-result { gap: 12px; margin-top: 6px; }
.ritual-reveal-phase .ascend-msg.success {
  color: #ad9d81;
  font: 14px/1.5 var(--font-body);
  letter-spacing: 0;
  text-shadow: none;
}
.success-celebration { position: absolute; z-index: 0; inset: -80px; overflow: hidden; pointer-events: none; }
.success-celebration i {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 5px;
  height: 16px;
  border-radius: 2px;
  background: #edbd52;
  box-shadow: 0 0 10px #f2b638;
  animation: ritual-celebration-burst 1.8s ease-out infinite;
}
.success-celebration i:nth-child(2) { --burst-x: 180px; --burst-y: -110px; animation-delay: -.15s; background: #72cfca; }
.success-celebration i:nth-child(3) { --burst-x: 230px; --burst-y: 20px; animation-delay: -.3s; }
.success-celebration i:nth-child(4) { --burst-x: 160px; --burst-y: 140px; animation-delay: -.45s; background: #bd81e8; }
.success-celebration i:nth-child(5) { --burst-x: 50px; --burst-y: 190px; animation-delay: -.6s; }
.success-celebration i:nth-child(6) { --burst-x: -90px; --burst-y: 180px; animation-delay: -.75s; background: #72cfca; }
.success-celebration i:nth-child(7) { --burst-x: -190px; --burst-y: 110px; animation-delay: -.9s; }
.success-celebration i:nth-child(8) { --burst-x: -230px; --burst-y: -20px; animation-delay: -1.05s; background: #bd81e8; }
.success-celebration i:nth-child(9) { --burst-x: -150px; --burst-y: -150px; animation-delay: -1.2s; }
.success-celebration i:nth-child(10) { --burst-x: -35px; --burst-y: -200px; animation-delay: -1.35s; background: #72cfca; }
.success-celebration i:nth-child(11) { --burst-x: 100px; --burst-y: -180px; animation-delay: -1.5s; }
.success-celebration i:nth-child(12) { --burst-x: 210px; --burst-y: -70px; animation-delay: -1.65s; background: #bd81e8; }

.ritual-reveal-phase .ritual-product {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ritual-product-ghost {
  position: absolute;
  right: 3%;
  top: -34px;
  color: rgba(239,193,91,.07);
  font: 700 190px/1 var(--font-display);
  pointer-events: none;
}
.ritual-product-pedestal {
  position: relative;
  display: grid;
  place-items: end center;
  width: 340px;
  max-width: 82vw;
  height: 292px;
  margin: -8px auto 0;
}
.ritual-product-halo {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 238px;
  height: 238px;
  border: 1px solid rgba(231,181,72,.58);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,209,97,.28), rgba(88,47,8,.12) 50%, transparent 70%);
  box-shadow: 0 0 48px rgba(236,175,47,.42), inset 0 0 35px rgba(239,190,70,.18);
  transform: translate(-50%,-50%);
  animation: ritual-forged-ring 1.25s ease-in-out infinite alternate;
}
.ritual-product-halo::before,
.ritual-product-halo::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px dashed rgba(238,185,71,.45);
  border-radius: 50%;
  animation: ritual-ring-turn 12s linear infinite;
}
.ritual-product-halo::after { inset: 14px; animation-direction: reverse; animation-duration: 8s; }
.ritual-reveal-phase .ritual-product-art {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 20px;
  width: 230px;
  min-height: 230px;
  background: none;
  transform: translateX(-50%);
}
.ritual-reveal-phase .ritual-product-image {
  width: 205px;
  height: 230px;
  object-fit: contain;
  filter: drop-shadow(0 13px 10px #000) drop-shadow(0 0 20px #f2bd52);
  animation: ritual-forged-item-rise .9s cubic-bezier(.16,.9,.24,1.15) both,
    ritual-enchanted-item-glow 1.15s ease-in-out .9s infinite alternate;
}
.ritual-pedestal-top {
  position: absolute;
  z-index: 4;
  bottom: 34px;
  width: 230px;
  height: 35px;
  border: 1px solid #a8752b;
  border-radius: 50%;
  background: radial-gradient(ellipse, #7d541c, #211306 68%);
  box-shadow: 0 -5px 24px rgba(240,179,59,.25), inset 0 5px 12px rgba(245,190,71,.18);
}
.ritual-pedestal-base {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 184px;
  height: 58px;
  border: 1px solid #77501f;
  background: linear-gradient(90deg, #160c04, #5d3b13 18%, #2b1908 50%, #604016 82%, #150b03);
  clip-path: polygon(12% 0,88% 0,100% 100%,0 100%);
  box-shadow: 0 13px 28px #000;
}
.ritual-product-copy { position: relative; z-index: 3; text-align: center; }
.ritual-product-copy > strong { margin: 4px 0 8px; font-size: 24px; }
.ritual-product-reward {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(109,205,198,.38);
  background: rgba(25,71,67,.28);
  color: #98dbd5;
  font: 10px var(--font-display);
  letter-spacing: .04em;
}
.ritual-product-changes {
  position: relative;
  z-index: 3;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: max-height .65s ease, margin-top .45s ease, opacity .45s ease .12s, transform .45s ease .12s;
}
.ascend-stage.show-changes .ritual-product-changes {
  max-height: 520px;
  margin-top: 18px;
  opacity: 1;
  transform: none;
}
.ritual-reveal-phase .ritual-stat-compare { margin: 0 auto; }
.ritual-reveal-phase .ritual-product-affixes { text-align: left; }
.ritual-reveal-phase .ascend-done { margin-top: 2px; }

@keyframes ritual-ring-turn { to { transform: rotate(360deg); } }
@keyframes ritual-offering-float {
  50% { transform: translateY(-7px); filter: drop-shadow(0 8px 10px #000) drop-shadow(0 0 20px var(--ritual-accent)); }
}
@keyframes ritual-essence-travel {
  from { transform: translateX(0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  to { transform: translateX(104px) scale(1.2); opacity: 0; }
}
@keyframes ritual-progress { to { width: 100%; } }
@keyframes ritual-wave-current { to { background-position: 76px 0; } }
@keyframes ritual-wave-crest {
  to { opacity: 1; transform: translateY(-50%) scale(1.05, 1.14); }
}
@keyframes ritual-spark-rise {
  from { transform: translate(0,0); opacity: 0; }
  25% { opacity: 1; }
  to { transform: translate(35px,-360px); opacity: 0; }
}
@keyframes ritual-screen-gold-flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ritual-victory-radiance {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(-35deg); }
  28% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%,-50%) scale(1.15) rotate(15deg); }
}
@keyframes ritual-success-arrive {
  from { opacity: 0; transform: scale(.86); filter: brightness(2.4); }
  to { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes ritual-success-sigil { to { transform: scale(1.08); box-shadow: 0 0 55px rgba(238,178,52,.6); } }
@keyframes ritual-celebration-burst {
  0% { opacity: 0; transform: translate(0,0) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--burst-x,120px),var(--burst-y,-160px)) rotate(540deg); }
}
@keyframes ritual-forged-ring {
  to { transform: translate(-50%,-50%) scale(1.035); box-shadow: 0 0 58px rgba(236,175,47,.58), inset 0 0 38px rgba(239,190,70,.25); }
}
@keyframes ritual-forged-item-rise {
  from { opacity: 0; transform: translateY(-72px) scale(1.72) rotate(8deg); filter: brightness(3.8) drop-shadow(0 0 42px #fff0b5); }
  62% { opacity: 1; }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes ritual-enchanted-item-glow {
  from { filter: brightness(1.05) drop-shadow(0 13px 10px #000) drop-shadow(0 0 17px #f0b94b); }
  to { filter: brightness(1.38) drop-shadow(0 13px 10px #000) drop-shadow(0 0 32px #ffe395) drop-shadow(0 0 54px #73d3ce); }
}

@media (max-width: 620px) {
  .ritual-loading-content { width: 94vw; }
  .ritual-action-title { margin-top: 12px; font-size: 25px; letter-spacing: .06em; }
  .ascend-backdrop .ritual-convergence { grid-template-columns: minmax(0,1fr) 174px minmax(0,1fr); min-height: 210px; }
  .ascend-backdrop .ritual-offering { padding-right: 32px; }
  .ascend-backdrop .ritual-channel { width: 32px; }
  .ascend-backdrop .ritual-offering > img { width: 58px; height: 58px; }
  .ascend-backdrop .ritual-offering > b { max-width: 68px; line-height: 1.15; white-space: normal; }
  .ritual-item-ring { width: 174px; height: 174px; }
  .ritual-item-ring .ritual-item-image { width: 136px; height: 152px; }
  .ascend-backdrop .ascend-bar { width: 94%; max-width: 94%; height: 12px; }
  .ritual-channel i { animation-name: ritual-essence-travel-mobile; }
  .ritual-reveal-phase { padding: 24px 16px 22px; }
  .ritual-product-pedestal { height: 250px; }
  .ritual-product-halo { width: 202px; height: 202px; }
  .ritual-reveal-phase .ritual-product-image { width: 175px; height: 195px; }
  .ritual-pedestal-top { width: 200px; }
  .ritual-stat-compare { grid-template-columns: 1fr 14px 1fr; }
}
@keyframes ritual-essence-travel-mobile {
  from { transform: translateX(0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  to { transform: translateX(48px) scale(1.15); opacity: 0; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .ritual-loading-content { width: min(760px, 94vw); transform: none; }
  .ritual-overline { margin-bottom: 2px; }
  .ritual-action-title { margin: 6px 0 4px; font-size: clamp(20px, 4.5vh, 26px); }
  .ascend-backdrop .ritual-convergence {
    grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr);
    width: 620px;
    min-height: 150px;
  }
  .ascend-backdrop .ritual-offering { padding-right: 56px; }
  .ascend-backdrop .ritual-offering > img { width: 48px; height: 48px; }
  .ritual-item-ring { width: 150px; height: 150px; }
  .ritual-item-ring .ritual-item-image { width: 120px; height: 132px; }
  .ritual-target { margin: 6px auto 3px; }
  .ascend-backdrop .ascend-bar { width: 620px; max-width: 94%; height: 10px; margin: 4px auto 2px; }
  .ritual-steps { margin: 7px auto 3px; }
  .ritual-current { min-height: 16px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ritual-grand-orbit::before, .ritual-grand-orbit::after,
  .ascend-backdrop .ritual-offering > img, .ritual-item-ring::before,
  .ritual-item-ring .ritual-item-image, .ritual-channel i, .ritual-sparks i,
  .ascend-backdrop.ritual-result-success::before, .ascend-backdrop.ritual-result-success::after,
  .ritual-reveal-phase, .ritual-result-sigil, .success-celebration i,
  .ritual-product-halo, .ritual-product-halo::before, .ritual-product-halo::after,
  .ritual-reveal-phase .ritual-product-image { animation: none; }
  .ascend-backdrop .ascend-stage.charging .ascend-fill { animation: none; width: 100%; }
  .ascend-backdrop .ascend-stage.charging .ascend-fill::before,
  .ascend-backdrop .ascend-stage.charging .ascend-fill::after { animation: none; }
  .ritual-product-changes { max-height: 520px; margin-top: 18px; opacity: 1; transform: none; }
}