@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Noto+Serif+JP:wght@600&family=Manrope:wght@400;600&display=swap');
:root{--paper:#e9edff;--accent:#8b6cf0;--accent2:#4f9bff;--accent3:#5b6cf0;--mute:#9aa6d4;--line:rgba(160,175,255,.17);--dark:#050816;--kanjiFont:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:linear-gradient(115deg,#060a1e 0%,#0e1438 50%,#1a0f4a 100%) fixed;color:var(--paper);font-family:'Manrope',system-ui,sans-serif;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;left:50%;bottom:-50vh;width:120vw;height:80vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(110,80,230,.26),transparent);animation:drift 18s ease-in-out infinite alternate;pointer-events:none}
body::after{content:"";position:fixed;left:-20vw;top:-30vh;width:70vw;height:70vh;background:radial-gradient(closest-side,rgba(60,130,255,.14),transparent);pointer-events:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px clamp(20px,4vw,48px)}
.brand img{display:block;height:26px;width:auto}
.navRight{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);overflow-x:auto;scrollbar-width:none}
.navRight::-webkit-scrollbar{display:none}
.navRight a{color:var(--mute);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .3s}
.navRight a:hover,.navRight a.isActive{color:var(--paper)}
.navRight a.isActive{box-shadow:0 2px 0 var(--accent)}
.navRight a.playLink{padding:8px 18px;border:1px solid transparent;background:linear-gradient(90deg,var(--accent),var(--accent3));color:var(--paper);transition:filter .3s,transform .3s}
.navRight a.playLink:hover{filter:brightness(1.2);transform:translateY(-2px)}
.page{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:150px clamp(20px,4vw,48px) 90px}
.pageTitle{overflow:hidden;margin:0 0 56px;padding-bottom:.1em}
.pageTitle span{display:block;width:fit-content;font-family:'Cinzel',serif;font-size:clamp(2.6rem,9vw,6rem);font-weight:600;letter-spacing:.04em;line-height:1.1;background:linear-gradient(90deg,var(--accent),var(--accent3) 55%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleUp 1s cubic-bezier(.2,.8,.2,1) .45s backwards}
.list{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:24px;padding:26px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.rowTitle{font-size:1.15rem;font-weight:600}
.rowText{color:var(--mute)}
.longText{max-width:820px;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.75}
.longText p{margin:0 0 1.2em;color:var(--paper)}
.tabBar{display:flex;flex-wrap:wrap;gap:4px 26px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.tabBtn{padding:12px 0;border:0;border-bottom:3px solid transparent;background:none;color:var(--mute);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .3s,border-color .3s}
.tabBtn:hover{color:var(--paper)}
.tabBtn.isActive{color:var(--paper);border-bottom-color:var(--accent)}
.tabPanel{display:none}
.tabPanel.isActive{display:block;animation:panelIn .6s cubic-bezier(.2,.8,.2,1) both}
.subBar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.subBtn{padding:8px 18px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--mute);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.subBtn:hover{color:var(--paper);border-color:var(--accent2)}
.subBtn.isActive{border-color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent3));color:var(--paper)}
.subPanel{display:none}
.subPanel.isActive{display:block;animation:panelIn .6s cubic-bezier(.2,.8,.2,1) both}
.cardGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tierBar{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:22px}
.tierBtn{padding:4px 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--mute);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .3s,border-color .3s}
.tierBtn:hover{color:var(--paper)}
.tierBtn.isActive{color:var(--paper);border-bottom-color:var(--accent2)}
.tierPanel.cardGrid{display:none}
.tierPanel.cardGrid.isActive{display:grid;animation:panelIn .5s cubic-bezier(.2,.8,.2,1) both}
.card{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s}
.card:hover{transform:translateY(-6px);border-color:var(--accent2);background:var(--depth)}
.cardTag{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:999px;background:var(--depth);color:var(--accent2);font-size:12px;font-weight:600}
.cardTitle{margin:0 0 6px;font-size:1.2rem;font-weight:600}
.cardText{margin:0;color:var(--mute)}
.member{border-top:1px solid var(--line)}
.memberHead{display:grid;grid-template-columns:minmax(140px,1fr) 2fr auto;gap:24px;align-items:center;width:100%;padding:26px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:padding .4s cubic-bezier(.2,.8,.2,1),color .3s}
.memberHead:hover{padding-left:18px;color:var(--accent)}
.memberName{font-size:1.15rem;font-weight:600}
.memberRole{color:var(--mute)}
.memberPlus{font-size:1.8rem;line-height:1;color:var(--accent2);transition:transform .4s}
.member.isOpen .memberPlus{transform:rotate(45deg)}
.memberBody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.member.isOpen .memberBody{grid-template-rows:1fr}
.memberInner{overflow:hidden}
.memberInner>div{max-width:680px;padding:0 0 30px}
.memberInner p{margin:0 0 16px;color:var(--paper)}
.memberInner h3{margin:0 0 8px;font-size:.9rem;font-weight:600;color:var(--accent2)}
.memberInner ul{margin:0;padding-left:20px;color:var(--mute)}
.memberInner li{margin:4px 0}
.memberInner li::marker{color:var(--accent)}
.linkRow{display:flex;align-items:center;gap:24px;padding:26px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;transition:padding .4s cubic-bezier(.2,.8,.2,1),color .3s}
.linkRow:hover{padding-left:18px}
.linkIcon{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:15px;background:var(--brand);color:var(--paper);box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}
.linkIcon svg{width:30px;height:30px;fill:currentColor}
.linkTitle{font-size:1.15rem;font-weight:600}
.linkText{color:var(--mute)}
.updateTop{margin-bottom:40px}
.updateName{margin:0;font-family:'Cinzel',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:600;line-height:1.15}
.updateDate{margin-top:6px;color:var(--accent2);font-weight:600}
.updateSummary{max-width:640px;margin:10px 0 0;color:var(--mute)}
.updateFeed{border-bottom:1px solid var(--line)}
.updateSection{display:grid;grid-template-columns:minmax(160px,1fr) 2.4fr;gap:32px;padding:44px 0;border-top:1px solid var(--line)}
.sectionHead{position:sticky;top:110px;align-self:start}
.sectionTitle{margin:0;font-size:1.35rem;font-weight:600}
.sectionTag{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:var(--depth);color:var(--accent2);font-size:12px;font-weight:600}
.item{padding:0 0 22px}
.item:last-child{padding-bottom:0}
.itemName{display:block;font-weight:600}
.itemText{display:block;color:var(--mute)}
.linkList{border-bottom:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.reveal.isShown{opacity:1;transform:none}
.foot{position:relative;z-index:1;padding:30px;text-align:center;color:var(--mute);font-size:13px}
.tabBtn:focus-visible,.subBtn:focus-visible,.memberHead:focus-visible,.panel:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.wipe{position:fixed;inset:0;z-index:50;pointer-events:none}
.wipe::before,.wipe::after{content:"";position:absolute;inset:0;clip-path:polygon(120% 0,120% 0,100% 100%,100% 100%)}
.wipe::before{background:var(--accent);animation:slashOut .8s cubic-bezier(.77,0,.18,1) .08s backwards}
.wipe::after{background:var(--dark);animation:slashOut .8s cubic-bezier(.77,0,.18,1) backwards}
.wipe.leaving::before{animation:slashIn .55s cubic-bezier(.77,0,.18,1) forwards}
.wipe.leaving::after{animation:slashIn .55s cubic-bezier(.77,0,.18,1) .09s forwards}
.homeTop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:96px 20px 30px;text-align:center}
.heroLogo{display:block;width:min(560px,78vw);height:auto;animation:logoIn 1.2s cubic-bezier(.2,.8,.2,1) .2s backwards}
.homeTag{margin:14px 0 24px;color:var(--mute);animation:logoIn 1.2s cubic-bezier(.2,.8,.2,1) .5s backwards}
.playBtn{display:inline-block;padding:13px 46px;background:linear-gradient(90deg,var(--accent),var(--accent3));color:var(--paper);font-weight:600;text-decoration:none;transform:skewX(-12deg);transition:filter .35s;animation:logoIn 1.2s cubic-bezier(.2,.8,.2,1) .7s backwards}
.playBtn span{display:inline-block;transform:skewX(12deg)}
.playBtn:hover{filter:brightness(1.25)}
.strip{position:relative;z-index:1;display:flex;gap:8px;height:clamp(300px,48vh,500px);margin:0 clamp(16px,4vw,56px) 40px}
.panel{position:relative;flex:1;overflow:hidden;transform:skewX(-10deg);border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--paper);text-decoration:none;transition:flex .8s cubic-bezier(.2,.8,.2,1),background .4s,border-color .4s;animation:stripIn .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*90ms + .8s)}
.panel:is(:hover,:focus-visible){flex:3.6;background:linear-gradient(160deg,rgba(139,108,240,.22),var(--depth));border-color:var(--accent2)}
.panelIn{position:absolute;inset:0 -40px;transform:skewX(10deg)}
.panelBg{position:absolute;left:50%;top:50%;font-family:var(--kanjiFont);font-size:clamp(9rem,22vw,18rem);line-height:1;color:var(--depth);transform:translate(-50%,-50%) scale(.9);transition:transform .8s cubic-bezier(.2,.8,.2,1),color .5s}
.panel:is(:hover,:focus-visible) .panelBg{color:var(--depth);transform:translate(-50%,-50%) scale(1.15)}
.panelVert{position:absolute;left:50%;top:50%;writing-mode:vertical-rl;transform:translate(-50%,-50%);font-family:'Cinzel',serif;font-size:1.5rem;font-weight:600;letter-spacing:.12em;white-space:nowrap;transition:opacity .3s}
.panel:is(:hover,:focus-visible) .panelVert{opacity:0}
.panelFull{position:absolute;left:64px;bottom:34px;opacity:0;translate:0 14px;transition:opacity .5s .15s,translate .6s .15s cubic-bezier(.2,.8,.2,1)}
.panel:is(:hover,:focus-visible) .panelFull{opacity:1;translate:0 0}
.panelName{display:block;font-family:'Cinzel',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:600;letter-spacing:.04em;white-space:nowrap}
.panelText{display:block;color:var(--mute);white-space:nowrap}
.ghostKanji{position:fixed;right:3vw;top:10vh;z-index:0;font-family:var(--kanjiFont);font-size:clamp(14rem,40vw,34rem);line-height:1;color:rgba(139,108,240,.09);pointer-events:none;animation:ghostIn 1.6s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes drift{from{transform:translateX(-58%)}to{transform:translateX(-42%)}}
@keyframes titleUp{from{transform:translateY(105%)}}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}}
@keyframes logoIn{from{opacity:0;translate:0 24px;filter:blur(8px)}}
@keyframes stripIn{from{opacity:0;translate:0 50px}}
@keyframes ghostIn{from{opacity:0;transform:translateY(40px) scale(.96)}}
@keyframes slashOut{from{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}to{clip-path:polygon(120% 0,120% 0,100% 100%,100% 100%)}}
@keyframes slashIn{from{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}to{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}}
@media (prefers-reduced-motion:reduce){*,body::before{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}
@media (max-width:760px){.updateSection{grid-template-columns:1fr;gap:14px;padding:32px 0}.sectionHead{position:static}.row{grid-template-columns:1fr;gap:4px}.brand img{height:22px}.strip{flex-direction:column;height:auto;gap:8px}.panel{flex:none;height:78px;transform:none}.panelIn{inset:0}.panelVert,.panelBg{display:none}.panelFull{left:20px;top:50%;bottom:auto;opacity:1;translate:0 -50%}.panelText{display:none}.panelName{font-size:1.6rem}.memberHead{grid-template-columns:1fr auto;gap:4px}.memberRole{grid-column:1;grid-row:2}.memberPlus{grid-column:2;grid-row:1/span 2}.cardGrid{grid-template-columns:1fr}}

/* Soulveil palette and shared surfaces. */
:root{--paper:#F0EDF2;--accent:#3572ee;--accent2:#3572ee;--accent3:#3572ee;--mute:#B2B7C2;--line:#252831;--dark:#0B0B0E;--surface:#15151B;--depth:#252831;--scroll-thumb:#475367;--scroll-track:#0B0B0E}
html{scrollbar-gutter:stable;scroll-behavior:smooth;scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin}
*{scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--scroll-track)}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid var(--scroll-track);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}::-webkit-scrollbar-thumb:active{background:var(--paper)}
body{background:var(--dark);color:var(--paper);font-family:'Manrope',Arial,sans-serif}body::before,body::after,.wipe,.ghostKanji{display:none}
a,button{ -webkit-tap-highlight-color:transparent;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a:active{opacity:.8}
.nav{background:var(--dark);border-bottom:1px solid var(--line);padding:16px max(24px,calc((100% - 1160px)/2));gap:24px}.brand img{width:140px;height:30px;object-fit:contain}.navRight{gap:23px;scrollbar-width:thin}.navRight a{font-size:12px}.navRight a.playLink{background:var(--accent);color:var(--dark);border-radius:4px;padding:9px 18px}.navRight a[aria-current]{color:var(--paper)}
.pageTitle span{background:none;color:var(--paper)}.subBtn.isActive{background:var(--accent);color:var(--dark)}.card{background:var(--surface)}.card:hover{background:var(--depth)}.linkIcon{background:var(--depth)!important}.foot{border-top:1px solid var(--line)}

/* Game info hierarchy; shared page styles remain unchanged on other routes. */
.gameInfoPage .page{max-width:1180px;padding:113px 30px 65px}
.gameInfoPage .pageTitle{margin:0 0 23px;padding-bottom:0}
.gameInfoPage .pageTitle span{font-size:clamp(32px,4.2vw,49px);letter-spacing:.015em;line-height:1.15;animation:none}
.gameInfoPage .tabBar{gap:0 21px;margin-bottom:24px}
.gameInfoPage .tabBtn{font-size:12px;padding:12px 0;border-bottom-width:2px}
.gameInfoPage #tab1{padding:0;border:0;border-radius:0;background:none;isolation:auto}
.gameInfoPage #tab1>.subBar{gap:8px;margin:0 0 19px}
.gameInfoPage #tab1>.subBar .subBtn{font-size:11px;line-height:1.4;padding:8px 16px;border-radius:4px;background:#111319;border-color:#303540;color:#bbc0ca}
.gameInfoPage #tab1>.subBar .subBtn.isActive{background:#222c3d;border-color:#5878a9;color:#f0f3fa;box-shadow:inset 0 -2px 0 #6891d5}
.gameInfoPage #tab1>.subBar .subBtn:not(.isActive):hover{background:#1b1f27;border-color:#5a626f;color:#fff}
/* Character art is confined to a quiet chapter header, never behind the gallery. */
.archiveHeader{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:112px;padding:20px 24px;margin-bottom:20px;overflow:hidden;border-top:1px solid #363b47;border-bottom:1px solid #282d36;background:#10131a}
.archiveHeader::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#10131a 20%,rgba(16,19,26,.8) 55%,rgba(16,19,26,.45)),url('assets/elements/section-background.png') right 33% / 75% auto no-repeat;opacity:.65;pointer-events:none}
.archiveEyebrow{margin:0 0 7px;font-size:9px;font-weight:600;letter-spacing:.2em;color:#9da7b8}
.archiveHeader h2{margin:0;font-family:'Cinzel',Georgia,serif;font-size:25px;font-weight:500;line-height:1.2;letter-spacing:.01em}
.archiveCount{align-self:flex-end;margin-bottom:2px;font-size:10px;letter-spacing:.07em;color:#c0c8d4;white-space:nowrap;padding:5px 9px;border:1px solid #3e4653;background:rgba(11,13,18,.75);border-radius:3px}
/* A wrapping gallery centers an incomplete final row without stretching its cards. */
.elementGrid{--gallery-gap:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gallery-gap);align-items:stretch}
.elementCard{--weapon-color:#aeb6c4;--weapon-light:#f0f3f8;--weapon-glow:174,182,196;position:relative;isolation:isolate;flex:0 0 calc((100% - 3 * var(--gallery-gap))/4);min-width:0;padding:0;overflow:hidden;border:1px solid #353944;border-radius:5px;background:#17191f;box-shadow:0 5px 14px rgba(0,0,0,.16);transition:transform 240ms ease,border-color 240ms ease,box-shadow 240ms ease}

.elementCard[data-element="zabimaru"]{--weapon-color:#c13b63;--weapon-light:#ffb5c5;--weapon-glow:194,37,90}
.elementCard[data-element="confusion"]{--weapon-color:#9475bd;--weapon-light:#ddc6f5;--weapon-glow:137,99,186}
.elementCard[data-element="snow"]{--weapon-color:#c5f2f5;--weapon-light:#f1fdff;--weapon-glow:183,235,246}
.elementCard[data-element="fire"]{--weapon-color:#e69040;--weapon-light:#ffe0a1;--weapon-glow:234,105,38}


.elementCard[data-element="blood"]{--weapon-color:#a63249;--weapon-light:#ee9bad;--weapon-glow:153,24,47}
.elementCard[data-element="zangetsu"]{--weapon-color:#db8649;--weapon-light:#fff0df;--weapon-glow:218,111,39}
.elementCard[data-element="berserk"]{--weapon-color:#943b45;--weapon-light:#dba0a6;--weapon-glow:136,34,48}
.elementCard[data-element="benihime"]{--weapon-color:#ba3e62;--weapon-light:#f4b5c8;--weapon-glow:183,37,81}
.elementArtwork{position:relative;isolation:isolate;display:grid;place-items:center;height:235px;padding:10px 8px;overflow:hidden;background:linear-gradient(145deg,#1b1d24,#101217 75%)}
.elementArtwork::before{content:'';position:absolute;inset:0;z-index:0;opacity:.52;background:radial-gradient(ellipse at 50% 46%,rgba(var(--weapon-glow),.13),rgba(var(--weapon-glow),.025) 52%,transparent 76%);transition:opacity 240ms ease;pointer-events:none}
.elementArtwork::after{content:'';position:absolute;inset:10px;z-index:0;border:1px solid rgba(255,255,255,.035);pointer-events:none}
.elementArtwork .elementWeapon{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:none;max-height:215px;min-height:0;object-fit:contain;opacity:1;transform:scale(1);transform-origin:center;transition:transform 240ms ease,filter 240ms ease}
/* Retain supplied image URLs in the document without adding a second busy layer. */
.elementArtwork .elementPreview{display:none}
.elementCaption{position:relative;min-height:83px;padding:14px 17px 15px;border-top:1px solid #3a3e49;background:linear-gradient(120deg,#1b1d24,#16181e);transition:border-color 240ms ease}
.elementCaption::before{content:'';position:absolute;top:-1px;left:17px;width:29px;height:2px;background:var(--weapon-color);opacity:.6;transition:opacity 240ms ease}
.elementCaption .cardTag{display:block;width:fit-content;margin:0 0 6px;padding:0;border-radius:0;background:none;color:#969eac;font-size:9px;line-height:1.4;letter-spacing:.08em;transition:color 240ms ease}
.elementCaption .cardTitle{margin:0;color:#e9ebf0;font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;transition:color 240ms ease}
.elementCard[data-element="snow"] .elementArtwork::before{background:radial-gradient(ellipse at 50% 48%,rgba(227,250,255,.17),rgba(155,208,222,.03) 52%,transparent 76%)}
.elementCard[data-element="ink"] .elementArtwork{background:linear-gradient(145deg,#202127,#111216 80%)}

.elementCard[data-element="fire"] .elementWeapon{filter:url(#fire-alpha-clean) drop-shadow(0 0 1px rgba(255,224,184,.5))}
@media(hover:hover) and (pointer:fine){
.elementCard:hover{background:#17191f;transform:translateY(-3px);border-color:var(--weapon-color);box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 16px rgba(var(--weapon-glow),.09)}
.elementCard:hover .elementWeapon{transform:scale(1.045);filter:brightness(1.1)}
.elementCard[data-element="fire"]:hover .elementWeapon{filter:url(#fire-alpha-clean) brightness(1.1) drop-shadow(0 0 1px rgba(255,224,184,.5))}
.elementCard:hover .elementArtwork::before{opacity:1}
.elementCard:hover .elementCaption{border-color:rgba(var(--weapon-glow),.5)}
.elementCard:hover .elementCaption::before{opacity:1}
.elementCard:hover .cardTitle,.elementCard:hover .cardTag{color:var(--weapon-light)}
.elementCard[data-element="snow"]:hover{box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 18px rgba(209,243,250,.14)}
}
.elementCard:focus-visible{outline:2px solid var(--weapon-light);outline-offset:4px;border-color:var(--weapon-color)}
.elementCard:focus-visible .cardTitle,.elementCard:focus-visible .cardTag{color:var(--weapon-light)}
/* Compatible persistent-state hooks; there is no new card-selection behavior. */
.elementCard:is(.isSelected,.isActive,[data-selected="true"],[aria-selected="true"]){outline:2px solid var(--weapon-color);outline-offset:3px;box-shadow:inset 0 -3px 0 var(--weapon-color)}
@media(max-width:1000px){.elementCard{flex-basis:calc((100% - 2 * var(--gallery-gap))/3)}.gameInfoPage .tabBar{gap:0 18px}.elementArtwork{height:230px}}
@media(max-width:700px){.gameInfoPage .page{padding:110px 20px 45px}.gameInfoPage .pageTitle{margin-bottom:15px}.gameInfoPage .tabBar{gap:0 18px;margin-bottom:20px}.gameInfoPage .tabBtn{font-size:11px;padding:10px 0}.archiveHeader{min-height:100px;padding:18px;margin-bottom:16px}.archiveHeader h2{font-size:22px}.elementGrid{--gallery-gap:12px}.elementCard{flex-basis:calc((100% - var(--gallery-gap))/2)}.elementArtwork{height:220px}.elementCaption{padding:12px 13px;min-height:77px}.elementCaption .cardTitle{font-size:15px}}
@media(max-width:430px){.gameInfoPage .page{padding-left:14px;padding-right:14px}.archiveHeader{padding:15px;gap:10px}.archiveHeader h2{font-size:19px}.archiveEyebrow{font-size:8px}.archiveCount{font-size:9px;padding:4px 6px}.elementArtwork{height:192px;padding:8px 5px}.elementArtwork .elementWeapon{max-height:178px}.elementCaption .cardTitle{font-size:14px}.elementCaption{padding:11px;min-height:76px}.elementGrid{--gallery-gap:10px}}
@media(max-width:320px){.elementCard{flex-basis:100%}.elementArtwork{height:225px}}
@media(prefers-reduced-motion:reduce){.elementCard,.elementCard *,.elementCard::before,.elementCard::after{transition:none!important;animation:none!important}.elementCard:hover,.elementCard:hover .elementWeapon{transform:none}}
@media(forced-colors:active){.elementCard{border:1px solid CanvasText}.elementCard:focus-visible{outline:2px solid Highlight}}
/* Elements wallpaper and the supplied race palette. Scoped to the active Elements tab. */
.gameInfoPage{--race-color:#a01e23;--race-rgb:160,30,35}
.gameInfoPage:has(#tab1 [data-sub="sub1_0"].isActive){--race-color:#a01e23;--race-rgb:160,30,35}
.gameInfoPage:has(#tab1 [data-sub="sub1_1"].isActive){--race-color:#7837aa;--race-rgb:120,55,170}
.gameInfoPage:has(#tab1 [data-sub="sub1_2"].isActive){--race-color:#7dc3ff;--race-rgb:125,195,255}
.gameInfoPage:has(#tab1 [data-sub="sub1_3"].isActive){--race-color:#aae1aa;--race-rgb:170,225,170}
.gameInfoPage:has(#tab1.isActive){--accent:var(--race-color);--accent2:var(--race-color);--accent3:var(--race-color)}
.gameInfoPage #tab1{padding:20px;border:1px solid rgba(var(--race-rgb),.5);border-radius:6px;background:linear-gradient(180deg,rgba(7,9,14,.45),rgba(7,9,14,.7)),url('assets/elements/section-background.png') center top / cover no-repeat}
.gameInfoPage #tab1>.subBar .subBtn{background:rgba(11,13,18,.88)}
.gameInfoPage #tab1>.subBar .subBtn.isActive{background:rgba(var(--race-rgb),.32);border-color:var(--race-color);color:#f0edf2;box-shadow:inset 0 -2px 0 var(--race-color)}
.gameInfoPage #tab1 .archiveHeader{background:rgba(11,13,18,.76);border-top-color:var(--race-color);border-bottom-color:rgba(var(--race-rgb),.4)}
.gameInfoPage #tab1 .archiveHeader::before{display:none}
.gameInfoPage #tab1 .archiveCount{border-color:rgba(var(--race-rgb),.65)}
@media(max-width:700px){.gameInfoPage #tab1{padding:14px}}
@media(max-width:430px){.gameInfoPage #tab1{padding:10px}}
/* Restore every element's assigned character background beneath its sword. */
.elementArtwork .elementPreview{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:var(--preview-position,center);opacity:.23;filter:saturate(.7) brightness(.8);pointer-events:none;transition:opacity 240ms ease,filter 240ms ease}
.elementArtwork::before{z-index:1}
.elementArtwork::after{z-index:2;inset:0;border:0;background:radial-gradient(ellipse at 50% 42%,rgba(9,10,13,.12),rgba(9,10,13,.62) 95%),linear-gradient(0deg,#101217,transparent 40%)}
.elementArtwork .elementWeapon{z-index:3;opacity:1}
.elementCard[data-element="confusion"]{--preview-position:50% 26%}
.elementCard[data-element="blood"]{--preview-position:50% 34%}
.elementCard[data-element="benihime"]{--preview-position:50% 38%}
.elementCard[data-element="snow"]{--preview-position:57% 50%}
@media(hover:hover) and (pointer:fine){.elementCard:hover .elementPreview{opacity:.36;filter:saturate(.85) brightness(.9)}}
.elementCard:focus-visible .elementPreview{opacity:.3}
@media(prefers-reduced-motion:reduce){.elementArtwork .elementPreview{transition:none!important}}

/* User-supplied rarity colors, separate from race and element theme colors. */
.elementCard[data-rarity="mythical"]{--rarity-color:rgb(69,150,255)}
.elementCard[data-rarity="legendary"]{--rarity-color:rgb(255,217,79)}
.elementCard[data-rarity="rare"]{--rarity-color:rgb(85,217,37)}
.elementCard[data-rarity="common"]{--rarity-color:rgb(255,255,255)}
.elementLabels{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;margin-bottom:7px}
.elementLabels .cardTag{margin:0}
.elementLabels .rarityBadge{display:inline-flex;align-items:center;gap:4px;color:var(--rarity-color);font-size:9px;line-height:1.4;font-weight:600;letter-spacing:.02em}
.rarityBadge::before{content:'';width:3px;height:3px;border-radius:50%;background:currentColor}

/* User-specified element colors. Rarity and race colors have separate owners. */
.elementCard[data-element="ink"]{--weapon-color:#a8a8ac;--weapon-light:#ffffff;--weapon-glow:200,200,205}
.elementCard[data-element="shinso"]{--weapon-color:#63b56b;--weapon-light:#d4f3d8;--weapon-glow:75,158,84}
.elementCard[data-element="kyokasuigetsu"]{--weapon-color:#9463c9;--weapon-light:#e4d1fa;--weapon-glow:139,83,192}
.elementCard[data-element="shadow"]{--weapon-color:#424248;--weapon-light:#d3d3d8;--weapon-glow:48,48,54}
.elementCard[data-element="wind"]{--weapon-color:#73bd7b;--weapon-light:#dcf5de;--weapon-glow:99,177,108}
.elementCard[data-element="assimilation"]{--weapon-color:#39393f;--weapon-light:#cacacf;--weapon-glow:42,42,48}
.elementCard[data-element="poison"]{--weapon-color:#285b3b;--weapon-light:#91bb9d;--weapon-glow:30,91,52}
.elementCard[data-element="water"]{--weapon-color:#397fd8;--weapon-light:#c5e2ff;--weapon-glow:48,116,205}
.elementCard[data-element="ice"]{--weapon-color:#8bd7f1;--weapon-light:#e4faff;--weapon-glow:139,215,241}
.elementCard[data-element="suzumushi"]{--weapon-color:#8f66bc;--weapon-light:#e0cff5;--weapon-glow:137,91,185}
.elementCard[data-element="judgement"]{--weapon-color:#dfc34d;--weapon-light:#fff2b4;--weapon-glow:223,195,77}
.elementCard[data-element="duality"]{--weapon-color:#b6b6bb;--weapon-light:#ffffff;--weapon-glow:202,202,210}
.elementCard[data-element="creation"]{--weapon-color:#e4e4e8;--weapon-light:#ffffff;--weapon-glow:228,228,232}
.elementCard[data-element="weight"]{--weapon-color:#56326f;--weapon-light:#c9afd9;--weapon-glow:74,40,98}
.elementCard[data-element="lightning"]{--weapon-color:#438af0;--weapon-light:#d0e6ff;--weapon-glow:67,138,240}
.elementCard[data-element="suzumebachi"]{--weapon-color:#e3c43c;--weapon-light:#fff2a5;--weapon-glow:227,196,60}
.elementCard[data-element="ash"]{--weapon-color:#919198;--weapon-light:#e0e0e5;--weapon-glow:145,145,152}
.elementCard[data-element="ink"] .elementArtwork::before,.elementCard[data-element="duality"] .elementArtwork::before{background:radial-gradient(ellipse at 42% 42%,rgba(240,240,245,.13),rgba(0,0,0,.38) 58%,transparent 80%)}
.elementCard[data-element="shadow"] .elementArtwork::before,.elementCard[data-element="assimilation"] .elementArtwork::before{background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,.12),rgba(0,0,0,.7) 72%,rgba(0,0,0,.85))}

/* Rarity controls are independent of race filters and element hover themes. */
.rarityFilters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.rarityFilter{--filter-color:#c7ccd5;padding:7px 13px;border:1px solid #373e49;border-radius:4px;background:rgba(11,13,18,.9);color:#afb6c2;font:inherit;font-size:11px;line-height:1.4;cursor:pointer;transition:background 200ms,border-color 200ms,color 200ms}
.rarityFilter[data-rarity-filter="mythical"]{--filter-color:rgb(69,150,255)}
.rarityFilter[data-rarity-filter="legendary"]{--filter-color:rgb(255,217,79)}
.rarityFilter[data-rarity-filter="rare"]{--filter-color:rgb(85,217,37)}
.rarityFilter[data-rarity-filter="common"]{--filter-color:#fff}
.rarityFilter:hover{border-color:var(--filter-color);color:#fff}
.rarityFilter.isActive{color:var(--filter-color);border-color:var(--filter-color);background:#242933;box-shadow:inset 0 -2px 0 var(--filter-color)}
.rarityFilter:focus-visible{outline:2px solid var(--filter-color);outline-offset:3px}
.elementCard[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.rarityFilter{transition:none}}

/* Arrancar element palettes from the user-provided image order. */
#sub1_1 .elementCard[data-element="light"]{--weapon-color:#9266d5;--weapon-light:#b6efff;--weapon-glow:117,124,229}
#sub1_1 .elementCard[data-element="phoenix"]{--weapon-color:#ca4249;--weapon-light:#ffc0c3;--weapon-glow:202,66,73}
#sub1_1 .elementCard[data-element="horse"]{--weapon-color:#d983b7;--weapon-light:#ffe0f2;--weapon-glow:217,131,183}
#sub1_1 .elementCard[data-element="spirit"]{--weapon-color:#8dcee9;--weapon-light:#e2f7ff;--weapon-glow:141,206,233}
#sub1_1 .elementCard[data-element="devil"]{--weapon-color:#e98686;--weapon-light:#ffe0e0;--weapon-glow:233,134,134}
#sub1_1 .elementCard[data-element="volcanica"]{--weapon-color:#dc863d;--weapon-light:#ffdeb8;--weapon-glow:220,134,61}
#sub1_1 .elementCard[data-element="pantera"]{--weapon-color:#315b9b;--weapon-light:#b6d1f5;--weapon-glow:49,91,155}
#sub1_1 .elementCard[data-element="storm"]{--weapon-color:#e1d88a;--weapon-light:#fff8cc;--weapon-glow:225,216,138}
#sub1_1 .elementCard[data-element="vampire"]{--weapon-color:#65ac70;--weapon-light:#d6f3da;--weapon-glow:101,172,112}
#sub1_1 .elementCard[data-element="teresa"]{--weapon-color:#dfc44e;--weapon-light:#fff1b4;--weapon-glow:223,196,78}
#sub1_1 .elementCard[data-element="shark"]{--weapon-color:#4b91d6;--weapon-light:#d0eaff;--weapon-glow:75,145,214}
#sub1_1 .elementCard[data-element="bone"]{--weapon-color:#96999f;--weapon-light:#e7e8eb;--weapon-glow:150,153,159}
#sub1_1 .elementCard[data-element="snake"]{--weapon-color:#305e40;--weapon-light:#a1c9ae;--weapon-glow:48,94,64}
#sub1_1 .elementCard[data-element="slash"]{--weapon-color:#dec64e;--weapon-light:#fff3b9;--weapon-glow:222,198,78}
#sub1_1 .elementCard[data-element="acid"]{--weapon-color:#b66abf;--weapon-light:#f8cce9;--weapon-glow:182,106,191}
#sub1_1 .elementCard[data-element="arrogante"]{--weapon-color:#9464bd;--weapon-light:#e5d2f8;--weapon-glow:148,100,189}
#sub1_1 .elementCard[data-element="starrk"]{--weapon-color:#4887d1;--weapon-light:#cde4ff;--weapon-glow:72,135,209}
#sub1_1 .elementCard[data-element="wrath"]{--weapon-color:#842c37;--weapon-light:#dba0a9;--weapon-glow:132,44,55}
#sub1_1 [data-element="light"] .elementArtwork::before{background:radial-gradient(ellipse at 25% 35%,rgba(145,83,213,.18),transparent 65%),radial-gradient(ellipse at 75% 55%,rgba(104,223,241,.16),transparent 65%),radial-gradient(ellipse at 50% 70%,rgba(72,121,220,.14),transparent 70%)}
#sub1_1 [data-element="acid"] .elementArtwork::before{background:radial-gradient(ellipse at 35% 40%,rgba(144,78,191,.18),transparent 65%),radial-gradient(ellipse at 65% 60%,rgba(226,126,189,.16),transparent 68%)}
/* Each race keeps its own collection wallpaper. */
.gameInfoPage #tab1{--collection-wallpaper:url('assets/elements/section-background.png');background-image:linear-gradient(180deg,rgba(7,9,14,.45),rgba(7,9,14,.7)),var(--collection-wallpaper)}
.gameInfoPage #tab1:has([data-sub="sub1_1"].isActive){--collection-wallpaper:url('assets/elements/arrancar/section-background.png')}