/* Permanent guardian: progression moves from untouched stone to ceremonial stele. */
.guardian-stage-stone .guardian-scene > .guardian-statue {
  background: radial-gradient(circle at 24% 31%, #202c2a 0 2px, transparent 3px), radial-gradient(circle at 72% 68%, #8c938a33 0 2px, transparent 3px), linear-gradient(96deg, #2c3734, #69716a 43%, #4c5752 70%, #263330);
  filter: grayscale(.35) drop-shadow(7px 17px 8px #132a253f);
}
.guardian-stage-stone .guardian-scene > .guardian-statue::after {
  inset: 28px 31px 52px; border: 0; background: repeating-linear-gradient(8deg, transparent 0 21px, #1723212c 22px 23px); box-shadow: none; opacity: .22;
}
.guardian-stage-stone .guardian-aura { opacity: .12; }

.guardian-stage-sprout .guardian-scene > .guardian-statue {
  background: radial-gradient(circle at 30% 24%, #a8ad9d24 0 2px, transparent 3px), linear-gradient(96deg, #2c3835, #6e756d 42%, #515e58 72%, #263431);
}
.guardian-stage-sprout .guardian-scene > .guardian-statue::after {
  inset: 27px 65px 48px; border: 2px solid #303d3988; background: repeating-linear-gradient(3deg, transparent 0 18px, #273430aa 19px 21px, transparent 22px 28px); box-shadow: inset 1px 1px #c8c8ad2b; opacity: .62;
}
.guardian-stage-sprout .guardian-scene > .guardian-sacred-rope { filter: saturate(.78); }

.guardian-stage-guardian .guardian-scene > .guardian-statue::after {
  inset: 23px 24px 46px; border: 3px solid #26333099; background: linear-gradient(90deg, transparent 31%, #293532aa 32% 35%, transparent 36% 65%, #293532aa 66% 69%, transparent 70%), repeating-linear-gradient(4deg, transparent 0 13px, #27332fa8 14px 16px, transparent 17px 23px); box-shadow: inset 2px 2px 2px #d2d0b427, inset -2px -2px 2px #101b1a77; opacity: .76;
}
.guardian-stage-guardian .guardian-aura { opacity: .5; }

.guardian-stage-radiant .guardian-scene > .guardian-statue {
  background: radial-gradient(circle at 24% 18%, #b7a65d3d 0 2px, transparent 3px), linear-gradient(96deg, #293633, #70766b 37%, #746e57 51%, #46534e 73%, #22302d);
  filter: drop-shadow(0 0 11px #b99b4650) drop-shadow(7px 17px 8px #132a253f);
}
.guardian-stage-radiant .guardian-scene > .guardian-statue::after {
  inset: 20px 20px 42px; border: 3px double #776942a8; background: linear-gradient(90deg, transparent 23%, #403e2db0 24% 27%, transparent 28% 48%, #403e2da8 49% 52%, transparent 53% 73%, #403e2db0 74% 77%, transparent 78%), repeating-linear-gradient(3deg, transparent 0 10px, #504a30b0 11px 13px, transparent 14px 19px), linear-gradient(125deg, transparent 42%, #b39a4848 43% 45%, transparent 46%); box-shadow: inset 0 0 9px #c2a84e40; opacity: .88;
}
.guardian-stage-radiant .guardian-aura { opacity: .82; background: radial-gradient(circle, #d0b45f55, transparent 68%); }

.guardian-stage-ascended .guardian-scene > .guardian-statue {
  background: radial-gradient(circle at 31% 21%, #d1b85a44 0 2px, transparent 3px), radial-gradient(circle at 74% 67%, #b79c4540 0 2px, transparent 3px), linear-gradient(96deg, #222f2c, #62695f 31%, #82795e 50%, #44514c 73%, #1c2927);
  filter: drop-shadow(0 0 18px #c5aa516e) drop-shadow(7px 17px 8px #132a253f);
}
.guardian-stage-ascended .guardian-scene > .guardian-statue::after {
  inset: 17px 17px 37px; border: 4px double #8d7845c4; background: radial-gradient(circle at 50% 48%, transparent 0 16px, #9d874a70 17px 19px, transparent 20px), linear-gradient(90deg, transparent 19%, #564b31bd 20% 23%, transparent 24% 39%, #564b31bd 40% 43%, transparent 44% 57%, #564b31bd 58% 61%, transparent 62% 77%, #564b31bd 78% 81%, transparent 82%), repeating-linear-gradient(2deg, transparent 0 8px, #695a34b5 9px 11px, transparent 12px 17px), linear-gradient(132deg, transparent 33%, #d0ad4c66 34% 36%, transparent 37% 64%, #d0ad4c55 65% 67%, transparent 68%); box-shadow: inset 0 0 13px #d1b35755, 0 0 5px #bfa04a55; opacity: .96;
}
.guardian-stage-ascended .guardian-aura { opacity: 1; background: radial-gradient(circle, #d4b75872, #9b7e2929 42%, transparent 70%); }
.guardian-stage-ascended .guardian-scene > .guardian-sacred-rope { height: 19px; filter: saturate(1.15) drop-shadow(0 0 7px #d4b75e88); }

@media (prefers-reduced-motion: reduce) {
  .guardian-aura { animation: none !important; }
}

.guardian-preview { margin-top: 22px; padding: 13px; border: 1px dashed #a68e56; background: #f1ead9; }
.guardian-preview > span { display: block; margin-bottom: 9px; color: #8e7542; font-size: 14px; letter-spacing: .12em; }
.guardian-preview > div { display: flex; flex-wrap: wrap; gap: 5px; }
.guardian-preview button { flex: 1 0 29%; padding: 7px 5px; border: 1px solid #a99568; background: #fff9e9; color: #554b38; font-size: 14px; cursor: pointer; }
.guardian-preview button.active { border-color: #9f3e32; background: #9f3e32; color: #fff; }

.daily-guardian { margin-top: 22px; padding: 15px; border-left: 3px solid #9e864e; background: #122d2b; color: #eee4ce; }
.daily-guardian > div:first-child { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; margin-bottom: 10px; }
.daily-guardian span,.daily-guardian em,.daily-guardian small { font-size: 14px; font-style: normal; }
.daily-guardian b { color: #d2b861; letter-spacing: .12em; }
.daily-guardian em { color: #9caf9f; }
.daily-guardian small { display: block; margin-top: 8px; color: #8fa49b; }
.daily-guardian .progress-track { background: #071b1a; }
.daily-guardian .progress-track i { background: linear-gradient(90deg,#547c70,#d4b85c); box-shadow: 0 0 8px #d5b75766; }
.guardian-daily-warm .guardian-aura { box-shadow: 0 0 30px #b99d4655; }
.guardian-daily-resonant .guardian-sacred-rope { filter: saturate(1.12) drop-shadow(0 0 5px #d1b45566); }
.guardian-daily-blessed .guardian-statue { filter: drop-shadow(0 0 12px #c1a34f66) drop-shadow(7px 17px 8px #132a253f); }
.guardian-daily-full .guardian-statue { filter: drop-shadow(0 0 19px #d2b45599) drop-shadow(7px 17px 8px #132a253f); }
.guardian-daily-full .guardian-scene::after { content:''; position:absolute; z-index:1; inset:25px 25px 45px; pointer-events:none; background:radial-gradient(circle at 18% 22%,#e5ce72 0 2px,transparent 3px),radial-gradient(circle at 78% 31%,#fff3b0 0 1px,transparent 2px),radial-gradient(circle at 25% 76%,#d9bc55 0 1px,transparent 2px),radial-gradient(circle at 83% 70%,#f1da80 0 2px,transparent 3px); animation:dailySpirit 2.8s ease-in-out infinite alternate; }
@keyframes dailySpirit { to { opacity:.35; transform:translateY(-9px) scale(1.04); } }


/* Eleven-step permanent guardian progression and carved inscriptions. */
body[class*="guardian-stage-"] .guardian-scene > .guardian-statue::after {
  inset:20px 0 auto;
  width:100%;
  height:58px;
  display:block;
  padding-top:0;
  border:0;
  background:none;
  color:#26333088;
  font:700 58px/1 Georgia,"Times New Roman",serif;
  letter-spacing:-.08em;
  text-align:center;
  text-shadow:1px 1px #a4aa9a44,-1px -1px #0d171655;
  box-shadow:none;
  opacity:.24;
}
.guardian-stage-stone .guardian-scene > .guardian-statue::after { content:''; }
.guardian-stage-sprout .guardian-scene > .guardian-statue::after { content:'I'; }
.guardian-stage-marked .guardian-scene > .guardian-statue::after { content:'II'; }
.guardian-stage-guardian .guardian-scene > .guardian-statue::after { content:'III'; }
.guardian-stage-crystal .guardian-scene > .guardian-statue::after { content:'IV'; }
.guardian-stage-votive .guardian-scene > .guardian-statue::after { content:'V'; }
.guardian-stage-radiant .guardian-scene > .guardian-statue::after { content:'VI'; }
.guardian-stage-rain .guardian-scene > .guardian-statue::after { content:'VII'; }
.guardian-stage-blessed .guardian-scene > .guardian-statue::after { content:'VIII'; }
.guardian-stage-sandal .guardian-scene > .guardian-statue::after { content:'IX'; }
.guardian-stage-ascended .guardian-scene > .guardian-statue::after { content:'X'; }

.guardian-statue .guardian-inscription {
  position:absolute;
  z-index:6;
  inset:82px 37px auto;
  width:auto;
  height:68px;
  display:grid;
  place-items:center;
  border:0;
  color:#202b28;
  background:none;
  font:600 32px/1 "Noto Serif TC","Songti TC",serif;
  letter-spacing:.08em;
  writing-mode:vertical-rl;
  text-shadow:1px 1px #a4aa9a55,-1px -1px #0d171666;
  opacity:.18;
  pointer-events:none;
  transition:color .8s,opacity .8s,text-shadow .8s,transform .8s;
}
.guardian-stage-sprout .guardian-inscription { opacity:.34; }
.guardian-stage-marked .guardian-inscription { opacity:.52; color:#263632; }
.guardian-stage-guardian .guardian-inscription { opacity:.68; color:#263b36; }
.guardian-stage-votive .guardian-inscription { opacity:.8; color:#66552d; text-shadow:0 1px #d6c16a66,0 -1px #251d11; }
.guardian-stage-radiant .guardian-inscription { opacity:.92; color:#9b8139; text-shadow:0 0 7px #d4b65388; }
.guardian-stage-blessed .guardian-inscription { opacity:1; color:#c2a64e; text-shadow:0 0 10px #d9ba5faa,0 1px #382d18; transform:scale(1.06); }
.guardian-stage-ascended .guardian-inscription { opacity:1; color:#e0c66b; text-shadow:0 0 13px #e2c460cc,0 1px #382d18; transform:scale(1.12); }

.guardian-stage-marked .guardian-scene>.guardian-statue {
  background:radial-gradient(circle at 28% 22%,#a9ad9c2e 0 2px,transparent 3px),linear-gradient(96deg,#2b3835,#71786f 42%,#53615b 72%,#24322f);
}
.guardian-stage-marked .guardian-scene>.guardian-statue:after {
  opacity:.68;
  border-color:#38464099;
  background:repeating-linear-gradient(3deg,transparent 0 17px,#2d3b36a8 18px 20px,transparent 21px 27px);
}
.guardian-stage-marked .guardian-aura { opacity:.38; }

.guardian-stage-votive .guardian-scene>.guardian-statue {
  background:radial-gradient(circle at 25% 19%,#b0a45e35 0 2px,transparent 3px),linear-gradient(96deg,#293633,#71776c 39%,#67634f 55%,#43514c 74%,#22302d);
  filter:drop-shadow(0 0 7px #b69b4540) drop-shadow(7px 17px 8px #132a253f);
}
.guardian-stage-votive .guardian-scene>.guardian-statue:after {
  opacity:.82;
  border-color:#635b3eaa;
  box-shadow:inset 0 0 7px #bda44930;
}
.guardian-stage-votive .guardian-aura { opacity:.66;background:radial-gradient(circle,#c8ad5650,transparent 68%); }

.guardian-stage-blessed .guardian-scene>.guardian-statue {
  background:radial-gradient(circle at 29% 20%,#cab45d44 0 2px,transparent 3px),radial-gradient(circle at 72% 66%,#ad93403d 0 2px,transparent 3px),linear-gradient(96deg,#26332f,#6c7166 34%,#7c7358 51%,#43504b 73%,#202d2a);
  filter:drop-shadow(0 0 15px #c2a64f65) drop-shadow(7px 17px 8px #132a253f);
}
.guardian-stage-blessed .guardian-scene>.guardian-statue:after {
  opacity:.93;
  border:4px double #826f42bb;
  box-shadow:inset 0 0 11px #cdb0524a,0 0 4px #b99d4744;
}
.guardian-stage-blessed .guardian-aura { opacity:.94;background:radial-gradient(circle,#d2b65e68,#9c81252a 44%,transparent 70%); }
.guardian-stage-blessed .guardian-scene>.guardian-sacred-rope { filter:saturate(1.08) drop-shadow(0 0 5px #d4b75e70); }


.guardian-stage-crystal .guardian-inscription { opacity:.74;color:#527b78;text-shadow:0 0 7px #91c4bb77,0 1px #172522; }
.guardian-stage-rain .guardian-inscription { opacity:.96;color:#6e9291;text-shadow:0 0 9px #9bc7c4aa,0 1px #1d302e; }
.guardian-stage-sandal .guardian-inscription { opacity:1;color:#c39558;text-shadow:0 0 11px #ddb76b99,0 1px #352316;transform:scale(1.09); }

.guardian-stage-crystal .guardian-scene>.guardian-statue {
  background:radial-gradient(circle at 26% 20%,#93c6bb3d 0 2px,transparent 3px),linear-gradient(96deg,#263532,#687a73 38%,#66817a 54%,#3d504a 74%,#1f2e2b);
  filter:drop-shadow(0 0 6px #70a39845) drop-shadow(7px 17px 8px #132a253f);
}
.guardian-stage-crystal .guardian-scene>.guardian-statue:after { opacity:.77;border-color:#526e669e;box-shadow:inset 0 0 7px #84aaa036; }
.guardian-stage-crystal .guardian-aura { opacity:.56;background:radial-gradient(circle,#84b8ad48,transparent 68%); }

.guardian-stage-rain .guardian-scene>.guardian-statue {
  background:radial-gradient(circle at 22% 18%,#a7cbc74a 0 2px,transparent 3px),radial-gradient(circle at 72% 63%,#6e9c9840 0 2px,transparent 3px),linear-gradient(96deg,#243431,#657670 34%,#70827b 52%,#40544f 74%,#1e2d2a);
  filter:drop-shadow(0 0 13px #78aaa35d) drop-shadow(7px 17px 8px #132a253f);
}
.guardian-stage-rain .guardian-scene>.guardian-statue:after { opacity:.9;border-color:#60837aaa;box-shadow:inset 0 0 10px #8db8ae44; }
.guardian-stage-rain .guardian-aura { opacity:.88;background:radial-gradient(circle,#85b9b05e,#527b7524 44%,transparent 70%); }

.guardian-stage-sandal .guardian-scene>.guardian-statue {
  background:radial-gradient(circle at 28% 19%,#d0a66648 0 2px,transparent 3px),radial-gradient(circle at 73% 68%,#8e613b42 0 2px,transparent 3px),linear-gradient(96deg,#312b25,#725942 34%,#846849 52%,#4f4033 74%,#29241f);
  filter:drop-shadow(0 0 16px #c18d5268) drop-shadow(7px 17px 8px #1d15113f);
}
.guardian-stage-sandal .guardian-scene>.guardian-statue:after { opacity:.96;border:4px double #8d6846c2;box-shadow:inset 0 0 12px #d1a25a4d,0 0 4px #b47c4548; }
.guardian-stage-sandal .guardian-aura { opacity:.98;background:radial-gradient(circle,#d0a25f69,#8a5b302d 44%,transparent 70%); }
.guardian-stage-sandal .guardian-scene>.guardian-sacred-rope { filter:saturate(1.12) drop-shadow(0 0 6px #d4a55f78); }

/* Replace the old box-like texture with a readable carved stage numeral. */
body[class*="guardian-stage-"] .guardian-scene > .guardian-statue::after {
  inset:20px 0 auto;
  width:100%;
  height:58px;
  display:block;
  padding-top:0;
  border:0;
  background:none;
  box-shadow:none;
  clip-path:none;
  filter:none;
}

/* Keep the stone naturally mottled; remove the accidental box/grid texture. */
.guardian-scene > .guardian-statue::before {
  background:
    radial-gradient(circle at 20% 33%,#d1d0b733 0 1px,transparent 2px),
    radial-gradient(circle at 62% 18%,#0006 0 1px,transparent 2px),
    radial-gradient(circle at 76% 72%,#d7d3b829 0 2px,transparent 3px),
    radial-gradient(ellipse at 35% 62%,#17232124 0 2px,transparent 3px);
  background-size:23px 21px,37px 33px,49px 43px,61px 57px;
  mix-blend-mode:overlay;
}

/* The five-color sacred rope is awarded only at the final guardian stage. */
body[class*="guardian-stage-"] .guardian-scene > .guardian-sacred-rope {
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-8px) rotate(-2deg);
  transition:opacity .8s ease,transform .8s ease,visibility .8s;
}
body.guardian-stage-ascended .guardian-scene > .guardian-sacred-rope {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-2px) rotate(-2deg);
}