#characterModal { padding:18px; }
#characterModal .character-modal-content { width:min(100%,880px); max-width:880px; margin:clamp(8px,3vh,30px) auto; padding:clamp(18px,3vw,32px); border:2px solid #fbd376; background:linear-gradient(145deg,#fffcf3,#f0f9ff 60%,#f7f0ff); box-shadow:0 22px 80px #081b3d85; }
#characterModal .character-links { display:block; max-height:min(72dvh,640px); padding:2px 8px 12px 2px; }
#characterModal .character-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 18px; padding:16px; border:1px solid #d6e5ee; border-radius:18px; background:#ffffffb8; }
#characterModal .character-group + .character-group { margin-top:18px; }
#characterModal .character-group-villains,#characterModal .character-group-nemeses { border-top:4px solid #af849c; }
#characterModal .character-group-villains { background:linear-gradient(120deg,#fff1ef,#f8eefa); }
#characterModal .character-group-spendens { background:linear-gradient(120deg,#eafcf7,#edf4ff); }
#characterModal .character-group-nemeses { grid-template-columns:repeat(2,minmax(0,1fr)); background:linear-gradient(120deg,#f5eafd,#ffeaf1); }
#characterModal .character-menu-heading { grid-column:1/-1; margin:0 0 3px; color:#234264; font-size:13px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
#characterModal .character-group-villains .character-menu-heading { color:#79465f; }
#characterModal .character-group-nemeses .character-menu-heading { color:#69436f; }
#characterModal .character-villain { border:1px solid #ddadbd; background:#fff9f8; color:#753d59; font-weight:800; }
#characterModal .character-villain:hover,#characterModal .character-villain:focus-visible { background:#743e5a; border-color:#743e5a; color:white; }
#characterModal .character-feature { --card:#eaf8ff; --edge:#7cc6d9; --ink:#164e75; position:relative; isolation:isolate; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:7px; align-items:center; min-height:62px; padding:10px; border:2px solid var(--edge); border-radius:15px; background:var(--card); color:var(--ink); box-shadow:0 4px 0 color-mix(in srgb,var(--edge),white 30%); font-size:13px; font-weight:850; overflow:hidden; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
#characterModal .character-feature:hover,#characterModal .character-feature:focus-visible { background:var(--card); color:var(--ink); transform:translateY(-4px); box-shadow:0 8px 0 color-mix(in srgb,var(--edge),white 30%); }
#characterModal .character-feature .character-icon { position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#fff; color:var(--ink); font-size:22px; box-shadow:0 2px 8px #1d3f601a; }
#characterModal .character-feature > span:nth-child(2) { position:relative; z-index:1; }
#characterModal .character-feature > span:last-child { position:relative; z-index:1; font-size:18px; }
#characterModal .character-team { grid-column:1/-1; --card:#d8f8ef; --edge:#5cbeab; --ink:#145f65; background:linear-gradient(105deg,#dcfff2,#e5eaff,#fff2c9); }
#characterModal .character-team:hover .character-icon { animation:team-sun 1.2s ease-in-out infinite; }
#characterModal .character-savers { grid-column:1/-1; --card:#fff4d7; --edge:#e9b75e; --ink:#785016; background:linear-gradient(105deg,#fff4cf,#edffe3,#dff6ff); }
#characterModal .character-savers:hover .character-icon,#characterModal .character-savers:focus-visible .character-icon { animation:savers-shine 1s ease-in-out infinite; }
#characterModal .character-ohio { --card:#e0f4ff; --edge:#54a9cf; --ink:#155477; }
#characterModal .character-ohio:hover .character-icon,#characterModal .character-ohio:focus-visible .character-icon { animation:ohio-command .8s ease-out both; }
#characterModal .character-silver { --card:#edf3fc; --edge:#9aaec8; --ink:#465f84; }
#characterModal .character-silver::after { content:""; position:absolute; inset:-30% auto -30% -50%; width:38%; background:linear-gradient(90deg,transparent,#ffffffaf,transparent); transform:skewX(-20deg); pointer-events:none; }
#characterModal .character-silver:hover::after,#characterModal .character-silver:focus-visible::after { animation:silver-glint .7s ease-out forwards; }
#characterModal .character-amatist { --card:#f6eaff; --edge:#ba89d6; --ink:#724497; }
#characterModal .character-amatist:hover .character-icon,#characterModal .character-amatist:focus-visible .character-icon { animation:amatist-gem .8s ease-in-out; }
#characterModal .character-oska { --card:#e9faed; --edge:#83c99a; --ink:#2d7558; }
#characterModal .character-oska:hover .character-icon,#characterModal .character-oska:focus-visible .character-icon { animation:oska-spell 1.1s ease-in-out infinite; }
#characterModal .character-raksha { --card:#fff0df; --edge:#e3ad73; --ink:#955332; }
#characterModal .character-raksha:hover .character-icon,#characterModal .character-raksha:focus-visible .character-icon { animation:raksha-leap .65s ease-out; }
#characterModal .character-shadow { --card:#e9e2f3; --edge:#9b86b2; --ink:#4d3c68; }
#characterModal .character-shadow:hover .character-icon,#characterModal .character-shadow:focus-visible .character-icon { animation:shadow-drift 1.1s ease-in-out infinite alternate; }
#characterModal .character-hai { --card:#ffe9f1; --edge:#de95b5; --ink:#9b416a; }
#characterModal .character-hai:hover .character-icon,#characterModal .character-hai:focus-visible .character-icon { animation:hai-surge .7s ease-in-out infinite alternate; }
#characterModal .character-rangtop { --card:#e8f5ff; --edge:#8bbce4; --ink:#315d8c; }
#characterModal .character-rangtop:hover .character-icon,#characterModal .character-rangtop:focus-visible .character-icon { animation:rangtop-idea .75s ease-in-out; }
#characterModal .character-flona { --card:#e8fae9; --edge:#8bcf9a; --ink:#34764a; }
#characterModal .character-flona:hover .character-icon,#characterModal .character-flona:focus-visible .character-icon { animation:flona-bloom .85s ease-out; }
#characterModal .character-fairy { --card:#f2ecff; --edge:#b7a0df; --ink:#73529b; }
#characterModal .character-fairy:hover .character-icon,#characterModal .character-fairy:focus-visible .character-icon { animation:fairy-flutter .8s ease-in-out infinite alternate; }
#characterModal .character-nuke { --card:#fff6da; --edge:#e6cb73; --ink:#80602a; }
#characterModal .character-nuke:hover .character-icon,#characterModal .character-nuke:focus-visible .character-icon { animation:nuke-orbit .9s ease-in-out; }
#characterModal .character-max { --card:#e6f6f4; --edge:#81c4ba; --ink:#2b726a; }
#characterModal .character-max:hover .character-icon,#characterModal .character-max:focus-visible .character-icon { animation:max-charge .55s ease-out; }
#characterModal .character-sona { --card:#fff0f0; --edge:#e5a2a0; --ink:#9b4a54; }
#characterModal .character-sona:hover .character-icon,#characterModal .character-sona:focus-visible .character-icon { animation:sona-spectrum 1s linear infinite; }
#characterModal .character-dod { --card:#ffede7; --edge:#e6a58d; --ink:#a14d36; }
#characterModal .character-dod:hover .character-icon,#characterModal .character-dod:focus-visible .character-icon { animation:dod-jitter .45s ease-in-out infinite; }
#characterModal .character-mary { --card:#f3e9f9; --edge:#c8a2da; --ink:#784a8b; }
#characterModal .character-mary:hover .character-icon,#characterModal .character-mary:focus-visible .character-icon { animation:mary-sway .85s ease-in-out infinite alternate; }
#characterModal .character-olibia { --card:#f7e9ef; --edge:#d7a6b7; --ink:#8b4f65; }
#characterModal .character-olibia:hover .character-icon,#characterModal .character-olibia:focus-visible .character-icon { animation:olibia-stamp .65s ease-out; }
@keyframes team-sun { 50%{transform:rotate(35deg) scale(1.15);box-shadow:0 0 0 8px #ffffff70} }
@keyframes savers-shine { 50%{transform:rotate(90deg) scale(1.14);box-shadow:0 0 0 8px #ffcd6b80} }
@keyframes ohio-command { 50%{transform:scale(1.18);box-shadow:0 0 0 9px #68b9db55} }
@keyframes silver-glint { to{left:120%} }
@keyframes amatist-gem { 50%{transform:rotate(35deg) scale(1.12);filter:drop-shadow(0 0 7px #ad62d5)} }
@keyframes oska-spell { 50%{transform:translateY(-6px) rotate(18deg);box-shadow:0 0 0 6px #87e6ad55} }
@keyframes raksha-leap { 40%{transform:translateY(-8px) rotate(-12deg)} 70%{transform:translateY(1px) rotate(5deg)} }
@keyframes shadow-drift { to{transform:translateX(7px) scale(1.08);filter:drop-shadow(-8px 4px 3px #51456f7a)} }
@keyframes hai-surge { to{transform:scale(1.13) rotate(-8deg);box-shadow:0 0 0 7px #f7adc955} }
@keyframes rangtop-idea { 25%{transform:rotate(-15deg)} 55%{transform:rotate(13deg) scale(1.15)} }
@keyframes flona-bloom { 50%{transform:scale(1.22) rotate(25deg);box-shadow:0 0 0 8px #aee8ab88} }
@keyframes fairy-flutter { to{transform:translateY(-6px) rotate(12deg);filter:drop-shadow(0 0 7px #b69deb)} }
@keyframes nuke-orbit { 50%{transform:rotate(180deg) scale(1.15);box-shadow:0 0 0 7px #f2dc75aa} }
@keyframes max-charge { 50%{transform:translateX(7px) skewX(-11deg)} }
@keyframes sona-spectrum { 25%{filter:hue-rotate(70deg)} 50%{filter:hue-rotate(160deg) brightness(1.15)} 75%{filter:hue-rotate(260deg)} }
@keyframes dod-jitter { 25%{transform:translateX(-3px) rotate(-6deg)} 75%{transform:translateX(3px) rotate(6deg)} }
@keyframes mary-sway { to{transform:rotate(-15deg) translateY(-4px)} }
@keyframes olibia-stamp { 45%{transform:translateY(5px) scale(.9)} 75%{transform:translateY(-2px) scale(1.1)} }
@media(max-width:660px){#characterModal .character-group{grid-template-columns:repeat(2,minmax(0,1fr))}#characterModal .character-modal-content{margin:4px auto}}
@media(max-width:430px){#characterModal .character-group{grid-template-columns:1fr;padding:12px}#characterModal .character-feature{min-height:54px}}
@media(prefers-reduced-motion:reduce){#characterModal .character-feature,#characterModal .character-feature .character-icon{animation:none!important;transition:none!important}}