/* V4.7: original Hidden Chamber relic frame CSS reused verbatim for the new chapter. */

/* V3.9 — THE FOUR RELICS. All ornaments are live CSS/SVG, not a flattened image. */
#otherSelf #osAnswers>button.relic-answer{
 position:relative;display:flex;align-items:center;min-height:90px;
 padding:18px 50px 18px 90px;line-height:1.35;
 border:1px solid color-mix(in srgb,var(--flame) 85%,white 15%);
 border-radius:15px;overflow:hidden;
 background:radial-gradient(ellipse at 12% 50%,rgba(var(--flame-rgb),.19),transparent 47%),
 linear-gradient(110deg,#071629,#020610 70%,#07101d);
 box-shadow:0 0 0 2px #020611,0 0 17px rgba(var(--flame-rgb),.43),
 inset 0 0 24px rgba(var(--flame-rgb),.13);
 text-shadow:0 0 9px #d8e8ff25;
 transition:transform .18s,box-shadow .2s;
}
#otherSelf #osAnswers>button.relic-answer::before{
 content:""!important;position:absolute;left:17px;top:50%;transform:translateY(-50%);
 width:53px;height:53px;background-color:var(--flame);
 background-repeat:no-repeat;background-position:center;background-size:contain;
 filter:drop-shadow(0 0 5px var(--flame)) drop-shadow(0 0 12px var(--flame));
 opacity:1;z-index:2;
 animation:relic-breathe 2.7s ease-in-out infinite alternate;
}
#otherSelf #osAnswers>button.relic-answer:nth-child(1)::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='.8' y2='1'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%239deaff'/%3E%3Cstop offset='1' stop-color='%232d72ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 3 62 39 40 77 18 39Z' fill='url(%23g)' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M18 39 40 27 62 39 40 77Z' fill='none' stroke='%23d8ffff' stroke-width='2'/%3E%3Cpath d='M40 3V77M18 39H62' stroke='%23e8ffff' stroke-width='1.6'/%3E%3C/svg%3E");
 background-color:transparent;
}
#otherSelf #osAnswers>button.relic-answer:nth-child(2)::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffcf7b' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='49' cy='23' r='15'/%3E%3Cpath d='M38 34 12 60l9 9 9-9 6 1 0-9 9-9'/%3E%3Cpath d='M48 12v10h11' stroke-width='3'/%3E%3C/g%3E%3Cpath d='M51 8 54 16 62 19 54 22 51 30 48 22 40 19 48 16Z' fill='%23fff1bc'/%3E%3C/svg%3E");
 background-color:transparent;
}
#otherSelf #osAnswers>button.relic-answer:nth-child(3)::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3CradialGradient id='v'%3E%3Cstop stop-color='%23f7c6ff'/%3E%3Cstop offset='.5' stop-color='%23a146ff'/%3E%3Cstop offset='1' stop-color='%234c0c8c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M40 4 71 40 40 76 9 40Z' fill='url(%23v)' stroke='%23eed7ff' stroke-width='3'/%3E%3Cpath d='M40 4 55 40 40 76 25 40Z M9 40H71 M40 4V76' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
 background-color:transparent;
}
#otherSelf #osAnswers>button.relic-answer:nth-child(4)::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23eaf5ff' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M18 9H62M18 71H62M23 11v11l17 18-17 18v11M57 11v11L40 40l17 18v11'/%3E%3C/g%3E%3Cpath d='M27 19h26L40 35Z' fill='%23d7eaff'/%3E%3Cpath d='M40 46 52 64H28Z' fill='%23b3d9ff'/%3E%3Ccircle cx='40' cy='40' r='3' fill='white'/%3E%3C/svg%3E");
 background-color:transparent;
}
#otherSelf #osAnswers>button.relic-answer::after{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
 background:linear-gradient(105deg,transparent 10%,rgba(var(--flame-rgb),.08) 34%,rgba(255,255,255,.16) 50%,transparent 64%);
 background-size:260% 100%;filter:none;
 animation:relic-shimmer 4.2s linear infinite;
}
#otherSelf #osAnswers>button.relic-answer:hover,
#otherSelf #osAnswers>button.relic-answer:focus-visible{
 transform:translateY(-2px);
 box-shadow:0 0 28px rgba(var(--flame-rgb),.75),inset 0 0 35px rgba(var(--flame-rgb),.25);
}
#otherSelf #osAnswers>button.relic-answer:active{
 transform:scale(.985);
 box-shadow:0 0 48px rgba(var(--flame-rgb),.95),inset 0 0 36px rgba(var(--flame-rgb),.35);
}
#otherSelf #osAnswers>button.relic-answer:disabled{opacity:.85}
@keyframes relic-breathe{0%{filter:drop-shadow(0 0 3px var(--flame)) drop-shadow(0 0 6px var(--flame));transform:translateY(-50%) scale(.94)}
100%{filter:drop-shadow(0 0 10px var(--flame)) drop-shadow(0 0 20px var(--flame));transform:translateY(-50%) scale(1.06)}}
@keyframes relic-shimmer{from{background-position:160% 0}to{background-position:-160% 0}}
@media(max-width:650px){
 #otherSelf #osAnswers>button.relic-answer{padding:16px 30px 16px 77px;min-height:84px;font-size:clamp(16px,4.3vw,19px)}
 #otherSelf #osAnswers>button.relic-answer::before{left:15px;width:45px;height:45px}
}
@media(prefers-reduced-motion:reduce){
 #otherSelf #osAnswers>button.relic-answer::before,
 #otherSelf #osAnswers>button.relic-answer::after{animation:none}
}

/* V4.1 — ornate crystal relief, layered living flames, no flattened image */
#otherSelf #osAnswers>button.relic-answer{isolation:isolate;overflow:visible!important;margin:8px 2px 13px!important;border:1px solid rgba(var(--flame-rgb),.75)!important;border-radius:17px!important;padding-right:56px!important;background:radial-gradient(ellipse at 15% 110%,rgba(var(--flame-rgb),.20),transparent 64%),linear-gradient(115deg,#05101e,#01040d 78%)!important;box-shadow:inset 0 0 30px rgba(var(--flame-rgb),.13),0 0 13px rgba(var(--flame-rgb),.28)!important;}
#otherSelf #osAnswers>button.relic-answer::before{z-index:5!important;left:22px!important;filter:drop-shadow(0 0 7px var(--flame)) drop-shadow(0 0 15px var(--flame))!important;}
#otherSelf #osAnswers>button.relic-answer::after{z-index:2!important;opacity:.7}
.relic-ornament{position:absolute;inset:-9px -12px;pointer-events:none;z-index:4;background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 4px var(--flame));animation:ornament-live 3.1s ease-in-out infinite alternate}
.relic-answer:nth-child(1) .relic-ornament{background-image:url('relic-ornament-1.svg')}.relic-answer:nth-child(2) .relic-ornament{background-image:url('relic-ornament-2.svg')}.relic-answer:nth-child(3) .relic-ornament{background-image:url('relic-ornament-3.svg')}.relic-answer:nth-child(4) .relic-ornament{background-image:url('relic-ornament-4.svg')}
.relic-fire{position:absolute;inset:-5px 2px;z-index:1;pointer-events:none;overflow:hidden;border-radius:16px;opacity:.95}
.relic-fire::before,.relic-fire::after{content:"";position:absolute;left:-18%;width:136%;height:65%;bottom:-42%;background:radial-gradient(ellipse at 12% 65%,rgba(var(--flame-rgb),.8),transparent 14%),radial-gradient(ellipse at 37% 80%,rgba(var(--flame-rgb),.8),transparent 19%),radial-gradient(ellipse at 66% 80%,rgba(var(--flame-rgb),.72),transparent 18%),radial-gradient(ellipse at 90% 65%,rgba(var(--flame-rgb),.8),transparent 15%);filter:blur(9px);animation:relic-fire-rise 2.1s ease-in-out infinite alternate}
.relic-fire::after{animation-delay:-1.3s;bottom:-30%;filter:blur(16px);opacity:.65}
.relic-arrow{position:absolute;right:24px;top:50%;transform:translateY(-50%) rotate(45deg);width:13px;height:13px;border-top:2px solid #f4faff;border-right:2px solid #f4faff;filter:drop-shadow(0 0 6px var(--flame));z-index:5;pointer-events:none}
#otherSelf #osAnswers>button.relic-answer:is(:hover,:focus-visible,:active) .relic-ornament{filter:drop-shadow(0 0 10px var(--flame)) drop-shadow(0 0 16px var(--flame))}
#otherSelf #osAnswers>button.relic-answer:is(:hover,:focus-visible,:active) .relic-fire{opacity:1;filter:brightness(1.8)}
#otherSelf #osAnswers>button.relic-answer:active{transform:scale(.985)!important}
@keyframes ornament-live{from{opacity:.78;filter:drop-shadow(0 0 3px var(--flame))}to{opacity:1;filter:drop-shadow(0 0 9px var(--flame))}}
@keyframes relic-fire-rise{from{transform:translateY(8px) scaleX(.95);opacity:.55}to{transform:translateY(-19px) scaleX(1.1);opacity:1}}
@media(max-width:650px){#otherSelf #osAnswers>button.relic-answer{padding-left:80px!important;padding-right:36px!important;margin:7px 4px 12px!important}.relic-ornament{inset:-7px -8px}.relic-arrow{right:15px;width:10px;height:10px}#otherSelf #osAnswers>button.relic-answer::before{left:17px!important}}
@media(prefers-reduced-motion:reduce){.relic-ornament,.relic-fire::before,.relic-fire::after{animation:none!important}}

/* V4.2: correct purple spiral + crystalline filigree and living flame halos */
#otherSelf #osAnswers>button.relic-answer:nth-child(3)::before{
 background-image:url('relic-spiral-v42.svg')!important;
 background-color:transparent!important;
 width:57px!important;height:57px!important;
}
#otherSelf #osAnswers>button.relic-answer{
 border-color:rgba(var(--flame-rgb),.55)!important;
 border-radius:20px!important;
 background:radial-gradient(ellipse at 4% 60%,rgba(var(--flame-rgb),.24),transparent 33%),radial-gradient(ellipse at 93% 120%,rgba(var(--flame-rgb),.12),transparent 46%),linear-gradient(110deg,#08182b,#030711 64%,#07111f)!important;
 box-shadow:0 0 0 2px #020814,0 0 23px rgba(var(--flame-rgb),.34),inset 0 0 34px rgba(var(--flame-rgb),.12)!important;
}
#otherSelf #osAnswers>button.relic-answer .relic-ornament{
 inset:-13px -15px!important;
 filter:drop-shadow(0 0 5px var(--flame)) drop-shadow(0 0 3px rgba(255,255,255,.45));
 animation:ornament-live 2.4s ease-in-out infinite alternate!important;
}
#otherSelf #osAnswers>button.relic-answer .relic-fire{
 inset:-11px -10px!important;overflow:visible!important;opacity:1!important;
 filter:drop-shadow(0 0 5px var(--flame));
}
#otherSelf #osAnswers>button.relic-answer .relic-fire::before{
 inset:auto -3% -21px -3%!important;width:106%!important;height:55px!important;
 background:radial-gradient(ellipse at 8% 50%,rgba(var(--flame-rgb),.75),transparent 20%),radial-gradient(ellipse at 29% 80%,rgba(var(--flame-rgb),.54),transparent 17%),radial-gradient(ellipse at 70% 90%,rgba(var(--flame-rgb),.54),transparent 18%),radial-gradient(ellipse at 93% 50%,rgba(var(--flame-rgb),.78),transparent 20%)!important;
 filter:blur(9px)!important;animation:relic-fire-rise 1.65s ease-in-out infinite alternate!important;
}
#otherSelf #osAnswers>button.relic-answer .relic-fire::after{
 inset:-8px -13px -8px -13px!important;width:auto!important;height:auto!important;
 border:2px solid rgba(var(--flame-rgb),.30);border-radius:24px;
 background:linear-gradient(110deg,transparent 5%,rgba(var(--flame-rgb),.26) 20%,transparent 37%,rgba(255,255,255,.24) 50%,transparent 62%,rgba(var(--flame-rgb),.25) 82%,transparent 96%)!important;
 background-size:250% 100%!important;
 filter:blur(5px)!important;animation:relic-shimmer 3s linear infinite!important;
}
#otherSelf #osAnswers>button.relic-answer:is(:active,:focus-visible) .relic-fire{filter:brightness(2) drop-shadow(0 0 17px var(--flame))!important}
#otherSelf #osAnswers>button.relic-answer:is(:active,:focus-visible) .relic-ornament{filter:brightness(1.6) drop-shadow(0 0 14px var(--flame))!important}
@media(max-width:650px){#otherSelf #osAnswers>button.relic-answer:nth-child(3)::before{width:48px!important;height:48px!important}#otherSelf #osAnswers>button.relic-answer .relic-ornament{inset:-9px -9px!important}}
@media(prefers-reduced-motion:reduce){#otherSelf #osAnswers>button.relic-answer .relic-ornament,#otherSelf #osAnswers>button.relic-answer .relic-fire::before,#otherSelf #osAnswers>button.relic-answer .relic-fire::after{animation:none!important}}

/* Only chapter III receives these layout and mirror adjustments. */
#otherSelf.other-self{min-height:0!important;padding:0 14px 35px!important;background:#030612!important}
#otherSelf .os-world{background:radial-gradient(ellipse at 50% 22%,#19133e,#040713 65%)!important}
#otherSelf .os-hall{opacity:.16!important;filter:hue-rotate(28deg) brightness(.55)!important;background-size:cover!important}
#otherSelf .os-content{max-width:850px!important;padding-top:12px!important}
#otherSelf .os-progress{margin:10px 0 13px!important}
#otherSelf .os-chapter{font-size:11px!important;letter-spacing:2px!important}
#otherSelf .os-title{font-size:clamp(27px,5vw,42px)!important;letter-spacing:2px!important;margin:5px 0!important}
#otherSelf .os-tagline{font-size:11px!important;letter-spacing:1px!important;line-height:1.5!important;margin:0 auto 0!important;max-width:450px!important}
#otherSelf .os-portal{position:relative!important;top:auto!important;left:auto!important;transform:none!important;width:min(72vw,255px)!important;height:min(80vw,292px)!important;margin:12px auto 12px!important;border:0!important;border-radius:10px!important;filter:none!important;box-shadow:0 0 18px #886aff77,0 0 38px #6339bd44!important;animation:osMirrorGlow 4s ease-in-out infinite!important;background:url('other-self-mirror-v47.webp') center 48% / cover no-repeat!important;overflow:visible!important}
#otherSelf .os-portal:before{inset:4px!important;border:0!important;border-radius:12px!important;box-shadow:inset 0 0 20px #d8c5ff55!important;animation:none!important}
#otherSelf .os-portal:after{content:''!important;position:absolute!important;inset:6px!important;background:radial-gradient(ellipse at 45% 45%,transparent 42%,#9977ff22 70%,transparent 85%)!important;animation:osMirrorGlimmer 4.6s ease-in-out infinite!important;pointer-events:none!important}
#otherSelf .os-portal-void{inset:0!important;background:none!important;animation:none!important;overflow:hidden!important;border-radius:9px!important}
#otherSelf .os-portal-void:before,#otherSelf .os-portal-void:after{display:none!important}
#otherSelf .os-phantom{display:none!important}
#otherSelf .os-veil{inset:12% 18%!important;opacity:.35!important;background:linear-gradient(105deg,transparent 25%,#d9d4ff30 48%,transparent 70%)!important;animation:osMirrorGlimmer 6s ease-in-out infinite!important}
#otherSelf .os-crown{top:0!important;font-size:31px!important;z-index:5!important;animation:osDiamond 2s ease-in-out infinite!important}
#otherSelf .os-diamond{bottom:0!important;font-size:24px!important;z-index:5!important;animation:osDiamond 1.8s ease-in-out infinite!important}
#otherSelf .os-floor{top:340px!important;opacity:.24!important}
#otherSelf .os-embers{opacity:.13!important;animation:osEmbers 28s linear infinite!important}
#otherSelf .os-identity-echo{font-size:10px!important;letter-spacing:1px!important;padding:7px!important;margin:0 auto 9px!important}
#otherSelf .os-question-wrap{max-width:740px!important;margin:0 auto 13px!important;padding:15px 20px!important}
#otherSelf #osQuestion{font-size:clamp(18px,4vw,25px)!important;line-height:1.35!important;margin:7px auto 0!important}
#otherSelf .os-answers{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:15px auto!important;max-width:740px!important}
#otherSelf #osAnswers>button.relic-answer{--flame:#50b9ff;--flame-rgb:60,165,255;display:block!important;text-align:left!important;min-height:70px!important;padding:13px 40px 13px 90px!important;margin:7px 8px 10px!important;font:clamp(16px,2.1vw,19px)/1.3 Georgia,serif!important;color:#f1f5ff!important;animation:none!important;cursor:pointer!important}
#otherSelf #osAnswers>button.relic-answer:nth-child(2){--flame:#ffad39;--flame-rgb:255,160,40}
#otherSelf #osAnswers>button.relic-answer:nth-child(3){--flame:#bd52ff;--flame-rgb:177,62,255}
#otherSelf #osAnswers>button.relic-answer:nth-child(4){--flame:#e2eaff;--flame-rgb:210,225,255}
#otherSelf #osAnswers>button.relic-answer .relic-ornament{animation:ornament-live 3s ease-in-out infinite alternate!important}
#otherSelf #osAnswers>button.relic-answer .relic-fire::before,#otherSelf #osAnswers>button.relic-answer .relic-fire::after{animation:relic-fire-rise 2.5s ease-in-out infinite alternate!important}
#otherSelf .os-footer{margin-top:20px!important}
@keyframes osMirrorGlow{0%,100%{box-shadow:0 0 13px #9b7aff88,0 0 34px #7545ff55}50%{box-shadow:0 0 25px #d0bbffbb,0 0 48px #985cff77}}
@keyframes osMirrorGlimmer{0%,100%{opacity:.12;transform:translateX(-5%)}50%{opacity:.62;transform:translateX(7%)}}
@media(max-width:650px){
#otherSelf .os-top{font-size:9px!important;letter-spacing:0!important;gap:5px!important}
#otherSelf .os-back{padding:8px!important}
#otherSelf .os-title{font-size:28px!important;letter-spacing:1px!important}
#otherSelf .os-tagline{font-size:10px!important}
#otherSelf .os-portal{width:min(61vw,245px)!important;height:min(70vw,278px)!important;margin:10px auto!important}
#otherSelf .os-question-wrap{padding:12px 15px!important}
#otherSelf #osQuestion{font-size:18px!important}
#otherSelf .os-answers{gap:6px!important;margin:11px auto!important}
#otherSelf #osAnswers>button.relic-answer{min-height:68px!important;padding:12px 30px 12px 76px!important;margin:7px 7px 10px!important;font-size:16px!important}
#otherSelf #osAnswers>button.relic-answer::before{left:15px!important;width:45px!important;height:45px!important}
#otherSelf #osAnswers>button.relic-answer .relic-ornament{inset:-9px -9px!important}
}
@media(prefers-reduced-motion:reduce){#otherSelf .os-portal,#otherSelf .os-portal:after,#otherSelf .os-veil,#otherSelf .os-crown,#otherSelf .os-diamond{animation:none!important}}

#otherSelf .os-world .os-floor{animation:none!important}