/* Aniimo detail — follows the Aniiland global theme and shares its normal toolbar. */
body.aniimo-detail-page{background:radial-gradient(ellipse at 85% 7%,rgba(137,93,215,.15),transparent 45%),var(--bg,#101923);color:var(--text,#eaf2f8);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}

/* The exported stills and clips have their own background baked in. Matching it here
   lets the artwork sit edge-to-edge with no visible rectangle around it. */
body.aniimo-detail-page{--aniimo-media-bg:linear-gradient(180deg,#242b36,#070b11)}
html[data-mode="light"] body.aniimo-detail-page{--aniimo-media-bg:#fff}

.aniimo-detail-main{max-width:1320px;margin:0 auto;padding:22px 26px 70px;min-height:65vh;line-height:1.65}
.aniimo-detail-main *{box-sizing:border-box}
.aniimo-detail-main a{color:var(--violet,#b9a1ed)}
.aniimo-breadcrumb{display:flex;align-items:center;gap:12px;margin:2px 0 22px;font-size:14px}
.aniimo-breadcrumb a:not(.aniimo-back){text-decoration:none;color:var(--muted,#a1b6c5)}
.aniimo-breadcrumb strong{font-weight:750;color:var(--text,#eaf2f8)}
.aniimo-back{display:grid;place-items:center;border:1px solid var(--line,#30414f);border-radius:50%;height:35px;width:35px;color:var(--text,#eaf2f8)!important;text-decoration:none;font-size:24px;line-height:1}
/* Wider artwork column on desktop. */
.aniimo-layout{display:grid;grid-template-columns:minmax(320px,520px) minmax(0,1fr);align-items:start;gap:26px}
.aniimo-profile{min-width:0;border:1px solid var(--line,#30414f);border-radius:19px;background:linear-gradient(164deg,rgba(165,111,205,.11),var(--panel,#172430) 26%,var(--panel,#172430) 90%);box-shadow:0 8px 26px rgba(3,9,24,.12);padding:15px;position:sticky;top:18px}
.aniimo-forms{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:7px;margin:2px 0 10px}
.aniimo-form-link{display:flex;flex-direction:column;align-items:center;justify-content:start;gap:5px;min-width:72px;max-width:105px;padding:7px 8px;border:1px solid transparent;text-decoration:none;border-radius:12px;color:var(--muted,#a1b6c5)!important;text-align:center;line-height:1.25;font-size:11px;transition:background .12s,border-color .12s}
.aniimo-form-link img{width:42px;height:42px;object-fit:contain;border-radius:10px}
.aniimo-form-link.is-active{border-color:var(--violet,#b9a1ed);background:rgba(185,161,237,.14);color:var(--text,#eaf2f8)!important}
.aniimo-form-link:hover,.aniimo-style-link:hover{background:rgba(185,161,237,.15)}

/* Artwork frame. The media is absolutely positioned so the frame — not the image's
   intrinsic size — decides the box, which keeps object-fit:contain honest. */
.aniimo-hero{position:relative;width:100%;aspect-ratio:4/5;max-height:640px;overflow:hidden;border-radius:16px;background:var(--aniimo-media-bg);cursor:zoom-in;contain:layout paint;isolation:isolate}
.aniimo-hero[data-bg="dark"]{background:linear-gradient(180deg,#242b36,#070b11)}
.aniimo-hero[data-bg="white"]{background:#fff}
.aniimo-hero img,.aniimo-hero video{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:contain;display:block}
.aniimo-hero video[hidden],.aniimo-hero img[hidden]{display:none}

/* Two swatches, top left: dark-background render and white-background render. */
.aniimo-bg-toggle{position:absolute;top:9px;left:9px;z-index:5;display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(9,14,22,.45);backdrop-filter:blur(6px)}
.aniimo-bg-toggle[hidden]{display:none}
.aniimo-bg-toggle button{width:20px;height:20px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;transition:box-shadow .12s,transform .12s}
.aniimo-bg-toggle button span{display:block;width:13px;height:13px;border-radius:50%}
.aniimo-bg-toggle button[data-bg-option="dark"] span{background:linear-gradient(180deg,#3a4351,#0b1017)}
.aniimo-bg-toggle button[data-bg-option="white"] span{background:#fff}
.aniimo-bg-toggle button.is-active{border-color:#fff;box-shadow:0 0 0 2px rgba(185,161,237,.85);transform:scale(1.06)}

/* Static / animation switch, top centre. */
.aniimo-view-toggle{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(9,14,22,.5);backdrop-filter:blur(6px)}
.aniimo-view-toggle button{width:30px;height:26px;padding:0;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:#cfdbe7;cursor:pointer;transition:background .12s,color .12s}
.aniimo-view-toggle button.is-active{background:rgba(255,255,255,.92);color:#141c26}
.aniimo-view-toggle button:disabled{opacity:.38;cursor:not-allowed}
.aniimo-bg-toggle button:focus-visible,.aniimo-view-toggle button:focus-visible,.aniimo-form-arrow:focus-visible,.aniimo-hero-expand:focus-visible{outline:2px solid var(--violet,#b9a1ed);outline-offset:2px}

/* Prev / next form arrows, vertically centred on the artwork. */
.aniimo-form-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(9,14,22,.45);backdrop-filter:blur(6px);color:#eaf2f8;cursor:pointer;opacity:.7;transition:opacity .15s,background .15s}
.aniimo-form-arrow:hover{opacity:1;background:rgba(9,14,22,.72)}
.aniimo-form-arrow.is-prev{left:8px}
.aniimo-form-arrow.is-next{right:8px}

/* Appearance tokens ride on the bottom of the artwork. */
.aniimo-styles{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;display:flex;justify-content:center;flex-wrap:wrap;gap:4px;width:max-content;max-width:calc(100% - 16px);padding:6px 8px;border-radius:999px;background:rgba(9,14,22,.52);backdrop-filter:blur(8px)}
.aniimo-style-link{width:28px;height:28px;flex:0 0 auto;display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;font-size:10.5px;font-weight:750;letter-spacing:.01em;text-decoration:none;color:#d7e2ee!important;transition:background .12s,border-color .12s,transform .12s}
.aniimo-style-link.is-special{border-color:rgba(185,161,237,.6)}
.aniimo-style-link.is-active{background:rgba(255,255,255,.92);border-color:transparent;color:#101923!important;transform:scale(1.06)}

.aniimo-hero-expand{position:absolute;top:8px;right:9px;z-index:5;width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:9px;background:rgba(9,14,22,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer;opacity:.88;transition:opacity .15s,background .15s}
.aniimo-hero:hover .aniimo-hero-expand,.aniimo-hero-expand:focus-visible{opacity:1;background:rgba(9,14,22,.75)}
.aniimo-art-credit{position:absolute;bottom:4px;right:9px;z-index:3;font-size:10px;color:#c9d6e2;opacity:.6;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* Evolution line: collapsed by default, one column per step, branching stacks. */
.aniimo-evo{margin-top:12px;border:1px solid var(--line,#30414f);border-radius:12px;background:var(--panel,#172430);overflow:hidden}
.aniimo-evo summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text,#eaf2f8);list-style:none}
.aniimo-evo summary::-webkit-details-marker{display:none}
.aniimo-evo summary::after{content:"▾";font-size:10px;color:var(--muted,#a1b6c5);transition:transform .15s}
.aniimo-evo[open] summary::after{transform:rotate(180deg)}
.aniimo-evo summary:focus-visible{outline:2px solid var(--violet,#b9a1ed);outline-offset:-2px}
.aniimo-evo-meta{font-size:11px;font-weight:600;color:var(--muted,#a1b6c5);margin-left:auto;margin-right:4px}
.aniimo-evo-chain{list-style:none;margin:0;padding:2px 13px 13px;display:flex;gap:22px;overflow-x:auto;scrollbar-width:thin}
.aniimo-evo-stage{position:relative;display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.aniimo-evo-stage:not(:last-child)::after{content:"›";position:absolute;right:-15px;top:50%;transform:translateY(-50%);color:var(--muted,#a1b6c5);font-size:17px;line-height:1}
.aniimo-evo-step{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#a1b6c5);opacity:.8}
.aniimo-evo-nodes{display:flex;flex-direction:column;gap:6px}
.aniimo-evo-node{display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:center;padding:5px 10px 5px 5px;border:1px solid transparent;border-radius:10px;background:var(--raised,#1e2e3d);text-decoration:none;color:var(--text,#eaf2f8)!important;min-width:134px}
.aniimo-evo-node img{grid-row:span 2;width:30px;height:30px;object-fit:contain;border-radius:7px}
.aniimo-evo-node b{font-size:12px;line-height:1.25}
.aniimo-evo-node small{font-size:10px;font-weight:400;color:var(--muted,#a1b6c5);line-height:1.2}
.aniimo-evo-node:hover{background:rgba(185,161,237,.14)}
.aniimo-evo-node.is-current{border-color:var(--violet,#b9a1ed);background:rgba(185,161,237,.17)}

.aniimo-profile-number{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line,#30414f);font-size:12px;color:var(--muted,#a1b6c5)}
.aniimo-profile h1{text-align:center;font-size:clamp(26px,3vw,32px);line-height:1.3;margin:14px 0;color:var(--text,#eaf2f8)}
.aniimo-profile h1 small{font-size:15px;font-weight:400;color:var(--muted,#a1b6c5)}
.aniimo-profile-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.aniimo-profile-tags span{padding:5px 10px;background:#467f7c;border-radius:7px;color:#fff;font-size:12px;font-weight:650}
.aniimo-profile-tags span:nth-child(2){background:#8b506e}.aniimo-profile-tags span:nth-child(3){background:#44516d}
#aniimo-caught-toggle{display:block;margin:18px auto 0;background:var(--raised,#1e2e3d);border:1px solid var(--line,#30414f);border-radius:9px;color:var(--text,#eaf2f8);padding:8px 16px;cursor:pointer;font-weight:650}
#aniimo-caught-toggle[hidden]{display:none}

/* Expanded artwork: one full-screen frame, the same controls in the same places. */
body.aniimo-art-expanded{overflow:hidden}
.aniimo-profile.is-expanded{position:fixed;inset:0;z-index:9000;display:block;padding:0;border:0;border-radius:0;background:#070b11;box-shadow:none;overflow:hidden}
.aniimo-profile.is-expanded>:not(.aniimo-hero){display:none!important}
.aniimo-profile.is-expanded .aniimo-hero{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;cursor:zoom-out}
.aniimo-profile.is-expanded .aniimo-styles{bottom:max(20px,env(safe-area-inset-bottom))}
.aniimo-profile.is-expanded .aniimo-form-arrow{width:44px;height:44px}

.aniimo-information{min-width:0}.aniimo-detail-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0 12px;border-bottom:1px solid var(--line,#30414f);margin-bottom:12px}
.aniimo-detail-tabs a{padding:8px 13px;border-radius:9px;text-decoration:none;color:var(--muted,#a1b6c5)!important;font-weight:700;font-size:13px}
.aniimo-detail-tabs a:hover,.aniimo-detail-tabs a:focus-visible{background:var(--raised,#1e2e3d);color:var(--text,#eaf2f8)!important}
.aniimo-information section{scroll-margin-top:22px;margin:22px 0 32px}
.aniimo-information h2{font-size:20px;line-height:1.35;color:var(--text,#eaf2f8);margin:23px 0 14px;border-left:3px solid var(--violet,#b9a1ed);padding-left:12px}
.aniimo-information p{color:var(--text,#eaf2f8);line-height:1.75}
.aniimo-information section>p,.aniimo-skill-list article{background:var(--panel,#172430);border:1px solid var(--line,#30414f);border-radius:13px;padding:14px 18px}

/* Homeland work abilities: the game's own icon plus the level number. */
.aniimo-work-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.aniimo-work-chip{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:var(--panel,#172430);border:1px solid var(--line,#30414f);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trait-color,#7ecbfa) 38%,transparent)}
.aniimo-work-chip img{width:44px;height:44px;object-fit:contain;display:block}
.aniimo-work-chip b{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:10px;background:var(--trait-color,#7ecbfa);color:#08111a;font-size:11px;font-weight:800;line-height:1;border:2px solid var(--panel,#172430)}
.aniimo-work-chip.is-plain{width:auto;height:auto;padding:9px 14px;display:block;font-size:13px;color:var(--text,#eaf2f8)}

/* Defence chart: the nine combat elements arranged around the form's own element. */
.aniimo-defense{background:var(--panel,#172430);border:1px solid var(--line,#30414f);border-radius:14px;padding:16px 16px 12px}
.aniimo-defense-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aniimo-defense-head h3{margin:0;font-size:15px;color:var(--text,#eaf2f8)}
.aniimo-defense-el{font-size:12px;font-weight:700;color:var(--muted,#a1b6c5);padding:3px 9px;border:1px solid var(--line,#30414f);border-radius:999px}
.aniimo-defense-copy{margin:9px 0 2px;font-size:13px;line-height:1.65;color:var(--muted,#a1b6c5);background:none;border:0;padding:0}
.aniimo-defense-ring{position:relative;width:min(100%,330px);aspect-ratio:1;margin:12px auto 6px}
.aniimo-defense-ring::before{content:"";position:absolute;inset:14%;border:1px dashed rgba(161,182,197,.22);border-radius:50%}
.aniimo-defense-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.aniimo-def-node{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;width:64px}
.aniimo-def-node img{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--raised,#1e2e3d);border:2px solid #6b7d90;object-fit:contain}
.aniimo-def-node b{font-size:11px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--muted,#a1b6c5)}
.aniimo-def-node.is-weak img{border-color:#e0655c;box-shadow:0 0 0 3px rgba(224,101,92,.14)}
.aniimo-def-node.is-weak b{color:#f08a82}
.aniimo-def-node.is-strong img{border-color:#4bc07a;box-shadow:0 0 0 3px rgba(75,192,122,.14)}
.aniimo-def-node.is-strong b{color:#6fdc9c}
.aniimo-defense-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;display:grid;gap:2px;pointer-events:none}
.aniimo-defense-center strong{font-size:15px;color:var(--text,#eaf2f8);line-height:1.2}
.aniimo-defense-center small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#a1b6c5);opacity:.85}
.aniimo-defense-key{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:6px 0 2px;padding:0;font-size:11px;color:var(--muted,#a1b6c5)}
.aniimo-defense-key li{display:flex;align-items:center;gap:6px}
.aniimo-defense-key li::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid #6b7d90}
.aniimo-defense-key li.is-strong::before{border-color:#4bc07a}
.aniimo-defense-key li.is-weak::before{border-color:#e0655c}

.aniimo-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.aniimo-stats>div{padding:11px 14px;border-radius:10px;background:var(--panel,#172430);border:1px solid var(--line,#30414f)}
.aniimo-stats dt{font-size:12px;color:var(--muted,#a1b6c5)}.aniimo-stats dd{font-size:19px;font-weight:750;color:var(--text,#eaf2f8);margin:2px 0}
.aniimo-skill-list{display:grid;gap:9px}.aniimo-skill-list article h3{font-size:16px;color:var(--text,#eaf2f8);margin:0 0 6px}.aniimo-skill-list article p{margin:0 0 6px}.aniimo-skill-list article small{color:var(--muted,#a1b6c5)}
.aniimo-detail-page .hub-footer{margin-top:30px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:970px){.aniimo-layout{grid-template-columns:1fr}.aniimo-profile{position:static;max-width:620px;margin:auto;width:100%}.aniimo-information{max-width:820px;width:100%;margin:auto}.aniimo-hero{max-height:min(78vh,660px)}.aniimo-detail-main{padding:16px 16px 50px}}
@media(max-width:600px){
 .aniimo-detail-main{padding:12px 9px 36px}.aniimo-breadcrumb{padding:0 5px}.aniimo-profile{padding:10px}
 .aniimo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.aniimo-detail-tabs{justify-content:flex-start;gap:0}.aniimo-detail-tabs a{padding:7px 9px}
 .aniimo-form-link{min-width:65px;max-width:90px}
 .aniimo-art-credit{display:none}
 .aniimo-style-link{width:26px;height:26px;font-size:10px}
 .aniimo-styles{gap:3px;padding:5px 7px;bottom:18px}
 .aniimo-form-arrow{width:32px;height:32px;opacity:.85}
 .aniimo-form-arrow.is-prev{left:5px}.aniimo-form-arrow.is-next{right:5px}
 .aniimo-defense-ring{width:min(100%,290px)}
 .aniimo-def-node{width:56px}.aniimo-def-node img{width:34px;height:34px;padding:7px}
 .aniimo-defense{padding:13px 11px 10px}
}

@media(prefers-reduced-motion:no-preference){::view-transition-old(root){animation:140ms ease-out both fade-out-dex}::view-transition-new(root){animation:160ms ease-in both fade-in-dex}@keyframes fade-out-dex{to{opacity:.85}}@keyframes fade-in-dex{from{opacity:.85}}}