
/* v13.7.0 — living section relics and progressive magical awakenings */
.section-magic-relic{--relic-color:#d2b174;position:relative;display:inline-grid;place-items:center;width:38px;height:38px;margin-left:10px;vertical-align:middle;border:1px solid color-mix(in srgb,var(--relic-color) 32%,rgba(255,255,255,.08));border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.11),rgba(19,18,25,.96) 58%,rgba(9,9,13,.98));color:color-mix(in srgb,var(--relic-color) 76%,#fff1c9);font:700 18px/1 Georgia,serif;box-shadow:inset 0 0 18px color-mix(in srgb,var(--relic-color) 9%,transparent),0 0 0 3px rgba(9,9,13,.46);transition:transform .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease;isolation:isolate}
.section-magic-relic::before{content:'';position:absolute;inset:-5px;border:1px solid color-mix(in srgb,var(--relic-color) 22%,transparent);border-radius:50%;opacity:.35;transform:scale(.78) rotate(0);transition:transform .35s ease,opacity .3s ease}
.section-magic-relic::after{content:attr(data-rune);position:absolute;inset:0;display:grid;place-items:center;color:inherit;opacity:.18;font-size:29px;transform:rotate(-22deg) scale(.72);z-index:-1}
.section-magic-relic:hover{transform:translateY(-1px) rotate(5deg);border-color:color-mix(in srgb,var(--relic-color) 60%,#fff);box-shadow:inset 0 0 20px color-mix(in srgb,var(--relic-color) 14%,transparent),0 0 18px color-mix(in srgb,var(--relic-color) 25%,transparent)}
.section-magic-relic[data-charge="1"]{box-shadow:0 0 13px color-mix(in srgb,var(--relic-color) 28%,transparent)}
.section-magic-relic[data-charge="2"]{transform:rotate(8deg) scale(1.04);box-shadow:0 0 20px color-mix(in srgb,var(--relic-color) 38%,transparent)}
.section-magic-relic[data-charge="3"]{color:#fff4d2;border-color:color-mix(in srgb,var(--relic-color) 76%,#fff);filter:saturate(1.35);box-shadow:0 0 28px color-mix(in srgb,var(--relic-color) 55%,transparent)}
.section-magic-relic[data-charge="4"]{animation:sectionRelicQuiver .34s ease 2;color:#fff8df;box-shadow:0 0 0 5px color-mix(in srgb,var(--relic-color) 12%,transparent),0 0 34px color-mix(in srgb,var(--relic-color) 72%,transparent)}
.section-magic-relic.awakened{animation:sectionRelicAwaken .58s ease 3;color:white;border-color:white;box-shadow:0 0 0 7px color-mix(in srgb,var(--relic-color) 18%,transparent),0 0 45px var(--relic-color),inset 0 0 22px color-mix(in srgb,var(--relic-color) 28%,transparent)}
.section-magic-relic.awakened::before{opacity:.9;transform:scale(1.46) rotate(180deg)}
@keyframes sectionRelicQuiver{0%,100%{transform:rotate(-5deg) scale(1.06)}50%{transform:rotate(6deg) scale(1.12)}}
@keyframes sectionRelicAwaken{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.22) rotate(14deg)}}
.section-relic-whisper{position:fixed;z-index:1100;max-width:min(280px,calc(100vw - 24px));padding:8px 11px;border:1px solid color-mix(in srgb,var(--whisper-color,#d2b174) 38%,rgba(255,255,255,.08));border-radius:12px;background:rgba(16,15,21,.96);color:#eee2ca;font:12px/1.35 Georgia,serif;box-shadow:0 14px 34px rgba(0,0,0,.4),0 0 18px color-mix(in srgb,var(--whisper-color,#d2b174) 18%,transparent);pointer-events:none;animation:sectionWhisperIn .2s ease both}
@keyframes sectionWhisperIn{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:none}}
.section-awakening-banner{--awakening-color:#d2b174;position:fixed;left:50%;top:16%;z-index:1090;width:min(560px,calc(100% - 28px));padding:22px 24px;border:1px solid color-mix(in srgb,var(--awakening-color) 52%,rgba(255,255,255,.12));border-radius:22px;background:radial-gradient(circle at 18% 10%,color-mix(in srgb,var(--awakening-color) 18%,transparent),transparent 44%),linear-gradient(160deg,rgba(29,25,35,.98),rgba(12,12,17,.99));box-shadow:0 24px 70px rgba(0,0,0,.56),0 0 46px color-mix(in srgb,var(--awakening-color) 22%,transparent);transform:translate(-50%,-12px) scale(.96);opacity:0;pointer-events:none;transition:opacity .28s ease,transform .36s cubic-bezier(.2,.8,.2,1)}
.section-awakening-banner.open{opacity:1;transform:translate(-50%,0) scale(1)}
.section-awakening-banner .banner-icon{float:left;width:62px;height:62px;margin-right:16px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--awakening-color) 62%,#fff);color:color-mix(in srgb,var(--awakening-color) 80%,#fff);background:rgba(5,5,8,.56);font:32px Georgia,serif;box-shadow:0 0 26px color-mix(in srgb,var(--awakening-color) 34%,transparent)}
.section-awakening-banner h4{margin:2px 0 7px;color:#f7e8c6;font:600 25px/1.05 Georgia,serif}.section-awakening-banner p{margin:0;color:#c9bdac;line-height:1.5}.section-awakening-banner::after{content:'✦ ᛉ ✧ ᚨ ✦';display:block;clear:both;padding-top:13px;color:color-mix(in srgb,var(--awakening-color) 65%,#f7e8c6);letter-spacing:.28em;text-align:center;opacity:.62}
.magic-ripple-target{animation:magicTargetRipple 1.3s ease both!important}.magic-focus-target{outline:1px solid color-mix(in srgb,var(--relic-focus,#d2b174) 65%,#fff)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--relic-focus,#d2b174) 13%,transparent),0 0 30px color-mix(in srgb,var(--relic-focus,#d2b174) 38%,transparent)!important;animation:magicFocusPulse 1.9s ease both!important}
@keyframes magicTargetRipple{0%,100%{filter:none}45%{filter:brightness(1.2) saturate(1.28)}}@keyframes magicFocusPulse{0%,100%{transform:none}45%{transform:translateY(-3px) scale(1.015)}}
#places.magic-section-active .map-compass{animation:magicCompassSpin 1.6s cubic-bezier(.2,.7,.2,1) both;color:var(--relic-section-color,#74b7ce);box-shadow:0 0 34px color-mix(in srgb,var(--relic-section-color,#74b7ce) 36%,transparent)}
@keyframes magicCompassSpin{0%{transform:rotate(12deg)}70%{transform:rotate(732deg) scale(1.12)}100%{transform:rotate(702deg)}}
#relationships.magic-section-active .network .edge{animation:magicEdgeWake 1.65s ease both;stroke:var(--relic-section-color,#cf7fa5)!important}@keyframes magicEdgeWake{0%,100%{opacity:.7;stroke-width:2.2}50%{opacity:1;stroke-width:4.2;filter:drop-shadow(0 0 5px currentColor)}}
#board.magic-section-active .board-link{animation:magicBoardThread 1.6s ease both;stroke:#d75b68!important}@keyframes magicBoardThread{0%,100%{opacity:.72}50%{opacity:1;stroke-width:4.4;stroke-dasharray:5 4}}
#timeline.magic-section-active .event{animation:magicChronicleEcho 1.45s ease both;animation-delay:calc(var(--magic-index,0) * 70ms)}@keyframes magicChronicleEcho{0%{transform:translateX(0)}35%{transform:translateX(7px);border-color:color-mix(in srgb,var(--relic-section-color,#b69ae5) 55%,transparent)}70%{transform:translateX(-3px)}100%{transform:none}}
#stash.magic-section-active .inventory-item,#stash.magic-section-active .stash-card{animation:mimicBlink 1.35s ease both}@keyframes mimicBlink{0%,100%{filter:none}42%{filter:brightness(.68) saturate(1.5)}58%{filter:brightness(1.28) saturate(1.5)}}
#threads.magic-section-active .thread-card{animation:threadFateWake 1.55s ease both}@keyframes threadFateWake{0%,100%{transform:none}50%{transform:translateY(-3px);filter:saturate(1.28)}}
#characters.magic-section-active .character-card,#characters.magic-section-active .npc-card{animation:nameMaskWake 1.5s ease both}@keyframes nameMaskWake{0%,100%{filter:none}45%{filter:brightness(1.18) contrast(1.04);transform:translateY(-2px)}}
#overview.magic-section-active .overview-card{animation:archiveEyeWake 1.5s ease both}@keyframes archiveEyeWake{0%,100%{filter:none}48%{filter:brightness(1.17);border-color:color-mix(in srgb,var(--relic-section-color,#d2b174) 48%,transparent)}}
.section-head h3{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.awakening-sigil.progressive{position:relative;overflow:hidden;min-height:118px;isolation:isolate}.awakening-sigil.progressive::after{content:'';position:absolute;inset:auto 10px 8px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--sigil-color) calc(var(--charge,0)*20%),rgba(255,255,255,.08) 0);box-shadow:0 0 12px color-mix(in srgb,var(--sigil-color) 28%,transparent);transition:background .2s ease}.awakening-sigil.progressive .awakening-charge{display:flex;justify-content:center;gap:4px;margin-top:8px}.awakening-sigil.progressive .awakening-charge i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.12);transition:.2s ease}.awakening-sigil.progressive[data-charge="1"] .awakening-charge i:nth-child(-n+1),.awakening-sigil.progressive[data-charge="2"] .awakening-charge i:nth-child(-n+2),.awakening-sigil.progressive[data-charge="3"] .awakening-charge i:nth-child(-n+3),.awakening-sigil.progressive[data-charge="4"] .awakening-charge i:nth-child(-n+4){background:var(--sigil-color);box-shadow:0 0 8px var(--sigil-color)}.awakening-sigil.progressive[data-charge="3"] b{filter:drop-shadow(0 0 12px var(--sigil-color));transform:scale(1.08)}.awakening-sigil.progressive[data-charge="4"]{animation:sectionRelicQuiver .34s ease 2;border-color:var(--sigil-color);box-shadow:0 0 28px color-mix(in srgb,var(--sigil-color) 42%,transparent)}
@media(max-width:620px){.section-magic-relic{width:34px;height:34px;font-size:16px;margin-left:7px}.section-awakening-banner{top:12%;padding:18px}.section-awakening-banner .banner-icon{width:50px;height:50px;font-size:25px}.section-awakening-banner h4{font-size:21px}.section-relic-whisper{font-size:11px}.awakening-sigil.progressive{min-height:108px}}
body.calm-mode .section-magic-relic,body.effects-off .section-magic-relic,body.calm-mode .magic-ripple-target,body.effects-off .magic-ripple-target{animation:none!important}
