/*
 * Corruption: the rotten look of a corrupted Skanimal (.sk-corrupted, applied like a variant colouring), the encounter
 * sheet (.cx), the Rot Drain as the corruption spreads through a team (.rd), the Purge as it's burned away (.px), and
 * the Decorrupter's case and reveal. The goo wobble is the page-wide SVG filter #sk-rot (_Host.cshtml).
 */

/* ---------- The corrupted look ---------- */

.sk-corrupted {
    filter: url(#sk-rot) brightness(0.42) sepia(1) hue-rotate(50deg) saturate(2.4) contrast(1.6)
        drop-shadow(0 7px 4px rgba(6, 14, 4, 0.9)) drop-shadow(0 0 10px rgba(110, 255, 70, 0.28));
    animation: var(--sk-idle, none), sk-seep 3.4s ease-in-out infinite;
}

@keyframes sk-seep {
    0%, 100% {
        filter: url(#sk-rot) brightness(0.42) sepia(1) hue-rotate(50deg) saturate(2.4) contrast(1.6)
            drop-shadow(0 7px 4px rgba(6, 14, 4, 0.9)) drop-shadow(0 0 8px rgba(110, 255, 70, 0.22));
    }
    50% {
        filter: url(#sk-rot) brightness(0.36) sepia(1) hue-rotate(62deg) saturate(2.8) contrast(1.75)
            drop-shadow(0 11px 6px rgba(6, 14, 4, 0.95)) drop-shadow(0 0 16px rgba(140, 255, 80, 0.45));
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-corrupted {
        animation: var(--sk-idle, none);
        filter: url(#sk-rot-still) brightness(0.42) sepia(1) hue-rotate(50deg) saturate(2.4) contrast(1.6)
            drop-shadow(0 7px 4px rgba(6, 14, 4, 0.9));
    }
}

/* The unknown: a corrupted Skanimal before it's purified never shows what it is */
.cblob { position: relative; display: inline-block; width: 170px; height: 170px; }
.cblob svg { width: 100%; height: 100%; overflow: visible; }
.cblob-body { filter: url(#sk-rot) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 12px rgba(110, 255, 70, 0.25)); transform-origin: 50% 85%; animation: cblob-ooze 3.2s ease-in-out infinite; }
@keyframes cblob-ooze { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, 0.95); } }
.cblob-eyes rect { fill: #9dff4a; filter: drop-shadow(0 0 5px #9dff4a); animation: cblob-blink 4.5s steps(1) infinite; }
.cblob-eyes rect:last-child { animation-delay: 0.08s; }
@keyframes cblob-blink { 0%, 88%, 100% { opacity: 1; transform: none; } 90% { opacity: 0.1; } 93% { opacity: 1; transform: translateX(3px); } 95% { transform: translateX(-2px); } }
.cblob-static rect { fill: rgba(170, 255, 120, 0.55); opacity: 0; animation: cblob-static 1.7s steps(1) calc(var(--i) * 0.23s) infinite; }
@keyframes cblob-static { 0%, 70% { opacity: 0; } 72% { opacity: 1; transform: translateX(6px); } 76% { opacity: 0.4; transform: translateX(-8px); } 80% { opacity: 0; } }
.cblob-q {
    position: absolute;
    left: 50%;
    top: 4%;
    transform: translate(-50%, -50%);
    font-family: ui-monospace, monospace;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #c8ff9a;
    text-shadow: 2px 0 rgba(255, 60, 110, 0.8), -2px 0 rgba(60, 220, 255, 0.8), 0 0 14px rgba(110, 255, 70, 0.7);
    animation: cx-glitch 3s steps(1) infinite;
    pointer-events: none;
}
.cblob.is-small { width: 46px; height: 46px; }
.cblob.is-small .cblob-q { font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
    .cblob-body, .cblob-eyes rect, .cblob-static rect, .cblob-q { animation: none; }
    .cblob-body { filter: url(#sk-rot-still) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.8)); }
}

/* In battle: the unknown foe flinches, lunges and wobbles like any fighter */
.bf-corrupted-blob { width: 100% !important; height: 100% !important; }
.bf-corrupted-blob.is-hurt { animation: cblob-hurt 0.45s ease-out; }
.bf-corrupted-blob.is-attack { animation: cblob-lunge 0.55s ease-in-out; }
@keyframes cblob-hurt { 20% { transform: translateX(8px) scale(1.06, 0.9); filter: brightness(2); } 60% { transform: translateX(-4px); } }
@keyframes cblob-lunge { 40% { transform: translate(-16px, 10px) scale(1.12, 0.88); } }
/* Fainted: the derez slices use the sprite image, which would give it away, so the blob just melts */
.bf-fighter.is-fainted .bf-corrupted-blob { animation: cblob-melt 1s ease-in forwards; }
@keyframes cblob-melt { to { transform: scale(1.5, 0.05) translateY(40%); opacity: 0; } }

/* The tutorial's rival: the goo drips off its feet onto the platform */
.bf-sprite.tb-corrupt { position: relative; }
.tb-drips { bottom: -4%; width: 70%; }
.st-found.tb-corrupt { position: relative; }

/* Goo drips running off a corrupted Skanimal's platform (the encounter sheet and reveal) */
.cx-drips { position: absolute; left: 50%; bottom: 6%; width: 60%; height: 40px; transform: translateX(-50%); pointer-events: none; }
.cx-drips i {
    position: absolute;
    top: 0;
    left: var(--x);
    width: 7px;
    height: 12px;
    border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    background: radial-gradient(circle at 40% 30%, #3b4f20, #0d1406 70%);
    box-shadow: 0 0 6px rgba(110, 255, 70, 0.25);
    animation: cx-drip 2.6s cubic-bezier(0.55, 0, 0.9, 0.5) var(--d) infinite;
}
@keyframes cx-drip {
    0% { opacity: 0; transform: translateY(-6px) scaleY(0.6); }
    15% { opacity: 1; }
    70% { opacity: 1; transform: translateY(26px) scaleY(1.5); }
    100% { opacity: 0; transform: translateY(34px) scaleY(0.4); }
}

.tb-corrupt-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--sc-radius-pill, 999px);
    background: linear-gradient(90deg, #12200a, #2c4a12);
    color: #a6ff6e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(110, 255, 70, 0.35);
}

/* ---------- The corrupted signal: a scan that decodes into something wrong ---------- */

.cs {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px;
    overflow: hidden;
    background: #050804;
    color: #fff;
    cursor: pointer;
    animation: cs-bg 4.2s linear both;
}
@keyframes cs-bg {
    0%, 20% { background: #0b1220; }
    22% { background: #3a0a12; }
    24% { background: #050804; }
    27% { background: #1d3a0a; }
    30%, 100% { background: radial-gradient(ellipse at 50% 42%, rgba(90, 200, 40, 0.22), transparent 60%), #050804; }
}
.cs-grid { opacity: 0.5; animation: cs-grid-break 0.4s steps(3) 0.9s both; }
@keyframes cs-grid-break { to { opacity: 0.12; filter: hue-rotate(90deg); transform: skewX(8deg); } }

/* The decode starts normally: bars sweep in to the middle... */
.cs-bars { position: absolute; left: 50%; top: 42%; height: 140px; display: flex; gap: 3px; transform: translate(-50%, -50%); }
.cs-bars span {
    width: calc(var(--w) * 1px);
    background: #e8f4ff;
    box-shadow: 0 0 6px rgba(150, 210, 255, 0.8);
    animation: cs-bar-in 0.5s ease-out calc(var(--i) * 0.018s) both, cs-bar-break 0.6s steps(4) calc(0.95s + var(--i) * 0.01s) forwards;
}
@keyframes cs-bar-in { from { opacity: 0; transform: translateY(-40px) scaleY(0.2); } to { opacity: 1; transform: none; } }
/* ...then they corrupt: bleed red and green, judder and drip away */
@keyframes cs-bar-break {
    0% { background: #ff3d6e; transform: translateX(4px); }
    35% { background: #9dff4a; transform: translateX(-6px) scaleY(1.2); }
    70% { background: #1d2d0e; transform: translateY(20px) scaleY(1.6); opacity: 0.7; }
    100% { opacity: 0; transform: translateY(80px) scaleY(2); }
}

/* The screen tears into horizontal slices that slide apart */
.cs-tear span {
    position: absolute;
    left: -10%;
    right: -10%;
    top: var(--y);
    height: 7%;
    background: linear-gradient(90deg, transparent, rgba(157, 255, 74, 0.35), rgba(255, 61, 110, 0.35), transparent);
    mix-blend-mode: screen;
    opacity: 0;
    animation: cs-tear 0.7s steps(5) calc(0.9s + var(--i) * 0.05s) both;
}
@keyframes cs-tear {
    0% { opacity: 1; transform: translateX(-30%); }
    40% { transform: translateX(25%); }
    70% { opacity: 0.8; transform: translateX(-12%); }
    100% { opacity: 0; transform: translateX(0); }
}

/* Hazard stripes slam in from the top and bottom edges */
.cs-hazard {
    position: absolute;
    left: 0;
    right: 0;
    height: 26px;
    background: repeating-linear-gradient(-45deg, #9dff4a 0 14px, #0b1205 14px 28px);
    box-shadow: 0 0 18px rgba(157, 255, 74, 0.5);
    animation: cs-slam 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) 1.15s both, cs-crawl 1s linear 1.5s infinite;
}
.cs-hazard.is-top { top: max(0px, env(safe-area-inset-top)); --from: -40px; }
.cs-hazard.is-bottom { bottom: max(0px, env(safe-area-inset-bottom)); --from: 40px; }
@keyframes cs-slam { from { transform: translateY(var(--from)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cs-crawl { to { background-position: 40px 0; } }

/* Something oozes up out of the static */
.cs-stage { position: relative; width: 200px; height: 200px; }
.cs-blob { width: 200px !important; height: 200px !important; animation: cs-emerge 1.1s cubic-bezier(0.3, 1.3, 0.5, 1) 1.55s both; }
@keyframes cs-emerge {
    0% { opacity: 0; transform: translateY(60px) scale(0.3, 0.1); }
    40% { opacity: 1; transform: translateY(10px) scale(1.15, 0.7); }
    70% { transform: translateY(-6px) scale(0.92, 1.1); }
    100% { transform: none; }
}

.cs-text { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-height: 96px; }
.cs-title {
    position: relative;
    font-family: ui-monospace, monospace;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.16em;
    color: #c8ff9a;
    opacity: 0;
    animation: cs-title 0.5s steps(4) 1.2s both;
}
.cs-title::before, .cs-title::after { content: attr(data-text); position: absolute; inset: 0; animation: cs-split 2.2s steps(1) 1.6s infinite; }
.cs-title::before { color: #ff3d6e; clip-path: inset(0 0 55% 0); }
.cs-title::after { color: #3cdcff; clip-path: inset(55% 0 0 0); }
@keyframes cs-title { 0% { opacity: 0; transform: scaleX(2.4); } 50% { opacity: 1; transform: scaleX(0.8) skewX(-20deg); } 100% { opacity: 1; transform: none; } }
@keyframes cs-split { 0%, 85%, 100% { transform: none; } 87% { transform: translateX(-5px); } 91% { transform: translateX(4px); } }
.cs-name { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 800; letter-spacing: 0.1em; opacity: 0; animation: px-settle 0.4s ease-out 2.4s forwards; }
.cs-name em { font-style: normal; color: #9dff4a; font-size: 15px; letter-spacing: 0.06em; }
.cs-sub { font-size: 13px; opacity: 0; animation: cs-sub 0.4s ease-out 2.8s forwards; }
@keyframes cs-sub { to { opacity: 0.8; } }

@media (prefers-reduced-motion: reduce) {
    .cs *, .cs, .cs *::before, .cs *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
    .cs-bars, .cs-tear { display: none; }
}

/* ---------- The encounter sheet ---------- */

.cx {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background:
        radial-gradient(ellipse at 50% 18%, rgba(90, 200, 40, 0.16), transparent 55%),
        repeating-linear-gradient(0deg, rgba(110, 255, 70, 0.035) 0 2px, transparent 2px 5px),
        #070b05;
    color: #e7f2dc;
    animation: cx-in 0.35s ease-out both;
}
@keyframes cx-in { from { opacity: 0; } to { opacity: 1; } }

.cx-inner { width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 0.02em; }
.cx-head .tb-corrupt-tag { font-size: 11px; }
.cx-close { background: none; border: 0; color: inherit; font-size: 24px; opacity: 0.7; padding: 4px; }

.cx-stage { position: relative; height: 210px; display: grid; place-items: center; }
.cx-stage::before {
    content: "";
    position: absolute;
    bottom: 10%;
    width: 62%;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(20, 40, 8, 0.95), rgba(20, 40, 8, 0) 70%);
}
.cx-sprite { position: relative; width: 170px; height: 170px; object-fit: contain; }
.cx-glitch { animation: cx-glitch 4s steps(1) infinite; }
@keyframes cx-glitch {
    0%, 92%, 100% { transform: none; }
    93% { transform: translateX(-4px) skewX(6deg); }
    95% { transform: translateX(5px) skewX(-8deg); }
    97% { transform: translateX(-2px); }
}

.cx-name { text-align: center; }
.cx-name strong { display: block; font-size: 22px; }
.cx-name span { font-size: 13px; opacity: 0.75; }
.cx-fed { color: #ff8a8a; font-weight: 700; }

.cx-moves { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cx-move {
    padding: 4px 10px;
    border-radius: var(--sc-radius-pill, 999px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
}
.cx-move.is-zeroday {
    border-color: rgba(255, 61, 110, 0.7);
    background: repeating-linear-gradient(135deg, rgba(255, 61, 110, 0.14) 0 6px, transparent 6px 12px);
    color: #ff9db3;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.15em;
}

.cx-stakes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-stake { padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; }
.cx-stake b { display: flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 2px; }
.cx-stake.is-win { background: rgba(110, 255, 160, 0.08); border: 1px solid rgba(110, 255, 160, 0.25); }
.cx-stake.is-lose { background: rgba(255, 80, 80, 0.08); border: 1px solid rgba(255, 80, 80, 0.3); }

.cx-danger { border-radius: 14px; padding: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); }
.cx-danger h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; display: flex; gap: 6px; align-items: center; }
.cx-danger.has-risk { border-color: rgba(255, 70, 70, 0.6); box-shadow: 0 0 18px rgba(255, 50, 50, 0.18) inset; }
.cx-team { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-member {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}
.cx-member img { width: 38px; height: 38px; object-fit: contain; }
.cx-member-name { font-size: 13.5px; font-weight: 700; display: flex; gap: 6px; align-items: center; min-width: 0; }
.cx-member-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-member-sub { font-size: 11px; opacity: 0.7; }
.cx-member.is-pickable { cursor: pointer; border: 1px solid transparent; }
.cx-member.is-pickable:hover, .cx-member.is-picked { border-color: rgba(110, 255, 70, 0.55); background: rgba(110, 255, 70, 0.07); }
.cx-member.is-unavailable { opacity: 0.45; }

.cx-cells { display: inline-flex; gap: 2px; margin-top: 3px; }
.cx-cells i { width: 9px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.cx-cells i.is-on { background: #6ee7a0; }
.cx-cells i.is-half { background: linear-gradient(90deg, #6ee7a0 50%, rgba(255, 255, 255, 0.12) 50%); }

.cx-risk { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: var(--sc-radius-pill, 999px); white-space: nowrap; }
.cx-risk.is-lost { background: rgba(255, 50, 50, 0.22); color: #ff8080; animation: cx-pulse-red 1.2s ease-in-out infinite; }
.cx-risk.is-demote { background: rgba(255, 170, 60, 0.18); color: #ffc070; }
.cx-risk.is-drain { background: rgba(255, 255, 255, 0.07); color: #cfd8c6; }
.cx-risk.is-safe { background: rgba(120, 220, 255, 0.16); color: #9be4ff; }
@keyframes cx-pulse-red { 50% { box-shadow: 0 0 12px rgba(255, 50, 50, 0.6); } }

.cx-warn {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 50, 50, 0.12);
    border: 1px solid rgba(255, 50, 50, 0.4);
    color: #ffb3b3;
    font-size: 13px;
}
.cx-warn ion-icon { flex: none; font-size: 18px; margin-top: 1px; }
.cx-note { font-size: 13px; opacity: 0.8; text-align: center; margin: 0; }

.cx-actions { display: grid; gap: 8px; margin-top: 4px; }
.cx-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 14px;
    border: 0;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
}
.cx-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cx-btn.is-fight { background: linear-gradient(135deg, #ff3d6e, #c2185b); box-shadow: 0 6px 18px rgba(255, 61, 110, 0.35); }
.cx-btn.is-run { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.cx-btn.is-cleanse { background: linear-gradient(135deg, #36d1dc, #5b86e5); box-shadow: 0 6px 18px rgba(80, 180, 255, 0.3); }
.cx-btn small { font-weight: 600; opacity: 0.85; }
.cx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- Social: what a locked part (gifts, trades) shows until level 2 ---------- */

.social-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 24px auto;
    max-width: 340px;
    padding: 22px 18px;
    border-radius: 16px;
    text-align: center;
    background: var(--sc-surface, rgba(255, 255, 255, 0.04));
    border: 1px dashed rgba(127, 127, 127, 0.35);
}
.social-locked-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(127, 127, 127, 0.14); font-size: 22px; }
.social-locked strong { font-size: 15px; }
.social-locked span { font-size: 13px; opacity: 0.75; }
.chat-gift-btn.is-locked { opacity: 0.45; cursor: not-allowed; }

/* ---------- Patch's daily word on the corruption ---------- */

.cd {
    position: fixed;
    inset: 0;
    z-index: 1150;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 16px max(24px, env(safe-area-inset-bottom));
    background: rgba(3, 6, 2, 0.72);
    backdrop-filter: blur(3px);
    animation: cx-in 0.35s ease-out both;
}
.cd-static {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(157, 255, 74, 0.05) 0 2px, transparent 2px 4px);
    animation: cd-roll 6s linear infinite;
    pointer-events: none;
}
@keyframes cd-roll { to { background-position: 0 120px; } }
.cd-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(160deg, #101a09, #070b05);
    border: 1px solid rgba(157, 255, 74, 0.35);
    box-shadow: 0 0 30px rgba(110, 255, 70, 0.15);
    color: #e7f2dc;
    animation: cd-rise 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.cd-card .dialogue { width: 100%; }
.cd-card .cx-row { width: 100%; }
@keyframes cd-rise { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cd-static, .cd-card { animation: none; } }

/* ---------- The Watch List: an eye, open or closed, instead of a heart ---------- */

.tm-heart.tm-watch-eye.is-on, .mc-favorite.mc-watch.is-on { color: #5fd4ff; text-shadow: 0 0 8px rgba(95, 212, 255, 0.6); }
.tm-heart.tm-watch-eye.is-pop ion-icon, .mc-favorite.mc-watch.is-pop ion-icon { animation: wl-blink 0.45s ease-out; }
@keyframes wl-blink { 0% { transform: scaleY(1); } 35% { transform: scaleY(0.1); } 70% { transform: scaleY(1.25); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
    .tm-heart.tm-watch-eye.is-pop ion-icon, .mc-favorite.mc-watch.is-pop ion-icon { animation: none; }
}

/* The Badge tile: the lead watched Skanimal on a cyan plaque with a little eye, the count, and any corruption news */
.hq-tile.is-watchlist .wl-plaque {
    position: relative;
    background: radial-gradient(circle, rgba(95, 212, 255, 0.28), transparent 70%);
    box-shadow: inset 0 0 0 2px rgba(95, 212, 255, 0.5);
    color: #5fd4ff;
    font-size: 24px;
}
.wl-plaque-eye {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #5fd4ff;
    color: #04121c;
    font-size: 12px;
    box-shadow: 0 0 0 2px var(--sc-surface);
}
.hq-tile.is-watchlist.has-corrupted .wl-plaque { box-shadow: inset 0 0 0 2px rgba(157, 255, 74, 0.6), 0 0 14px rgba(157, 255, 74, 0.3); }
.hq-tile.is-watchlist.has-corrupted .wl-plaque-eye { background: #9dff4a; }
.wl-tile-alert { display: inline-flex; align-items: center; gap: 4px; color: #9dff4a; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.wl-tile-hint { color: var(--sc-text-muted); font-size: 11.5px; line-height: 1.2; }
.hq-tile.is-watchlist.is-empty .hq-num { opacity: 0.5; }
.team-watch-btn ion-icon { color: #5fd4ff; }

.wl-group { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; display: flex; align-items: center; gap: 6px; }
.wl-group.is-corrupted { color: #a6ff6e; opacity: 1; }
.wl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wl-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--sc-surface, rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(127, 127, 127, 0.18);
}
.wl-row.is-corrupted { background: linear-gradient(135deg, rgba(20, 40, 8, 0.85), rgba(8, 14, 4, 0.9)); border-color: rgba(110, 255, 70, 0.35); color: #e7f2dc; }
.wl-row.is-gone { opacity: 0.55; }
.wl-row-art { position: relative; width: 48px; height: 48px; }
.wl-row-art img { width: 100%; height: 100%; object-fit: contain; }
.wl-row-art .cblob { width: 48px !important; height: 48px !important; }
.wl-row-main { min-width: 0; cursor: pointer; }
.wl-row-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-row-sub { font-size: 12px; opacity: 0.75; display: flex; gap: 4px; align-items: center; }
.wl-row-actions { display: flex; align-items: center; gap: 6px; }
.wl-btn { border: 0; border-radius: 10px; padding: 7px 10px; font-size: 12.5px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.wl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wl-btn.is-fight { background: linear-gradient(135deg, #ff3d6e, #c2185b); }
.wl-btn.is-cleanse { background: linear-gradient(135deg, #36d1dc, #5b86e5); }
.wl-eye { background: none; border: 0; color: #5fd4ff; font-size: 20px; padding: 4px; cursor: pointer; }
.wl-empty { text-align: center; padding: 24px 12px; opacity: 0.8; }
.wl-empty ion-icon { font-size: 36px; opacity: 0.6; }

/* ---------- Decorrupter: the item, its case, its reveal ---------- */

.dc-art { display: inline-block; width: var(--s, 40px); height: calc(var(--s, 40px) * 1.3); position: relative; }
.dc-art svg { width: 100%; height: 100%; overflow: visible; }
.dc-art.is-empty { opacity: 0.25; filter: grayscale(1); }

.backpack .dc-case { margin-bottom: 12px; }
.dc-case {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(54, 209, 220, 0.12), rgba(91, 134, 229, 0.12));
    border: 1px solid rgba(91, 180, 255, 0.35);
}
.dc-case-slots { display: flex; gap: 6px; }
.dc-case-text strong { display: block; font-size: 14px; }
.dc-case-text span { font-size: 12px; opacity: 0.8; }

/* ---------- The Rot Drain: the corruption spreading through a team ---------- */

.rd {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    background: radial-gradient(ellipse at 50% 10%, rgba(70, 140, 20, 0.22), transparent 55%), #050804;
    color: #e7f2dc;
    overflow: hidden;
    cursor: pointer;
    animation: cx-in 0.3s ease-out both;
}
.rd-title { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #a6ff6e; margin: 4px 0 2px; animation: rd-flicker 1.6s steps(2) infinite; }
@keyframes rd-flicker { 50% { opacity: 0.6; } }
.rd-sub { font-size: 13px; opacity: 0.75; margin: 0 0 6px; text-align: center; }

.rd-source { position: relative; width: 110px; height: 110px; flex: none; }
.rd-source img, .rd-source svg { width: 100%; height: 100%; object-fit: contain; animation: rd-throb 0.9s ease-in-out infinite; }
@keyframes rd-throb { 50% { transform: scale(1.06); } }

.rd-tendrils { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rd-tendrils path {
    fill: none;
    stroke: #0f1a07;
    stroke-width: 7;
    stroke-linecap: round;
    filter: url(#sk-rot) drop-shadow(0 0 4px rgba(120, 255, 60, 0.45));
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rd-reach 0.55s cubic-bezier(0.5, 0, 0.3, 1) calc(0.6s + var(--i) * var(--step)) forwards,
               rd-recede 0.35s ease-in calc(1.45s + var(--i) * var(--step)) forwards;
}
.rd-tendrils path.is-core { stroke: #6dff3c; stroke-width: 1.5; filter: none; opacity: 0.6; }
@keyframes rd-reach { to { stroke-dashoffset: 0; } }
@keyframes rd-recede { to { opacity: 0; } }

.rd-cards { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; flex: 1; justify-content: flex-start; }
.rd-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: rd-struck 0.5s ease-out calc(1.1s + var(--i) * var(--step)) both;
}
.rd-card.is-fighter { border-color: rgba(255, 61, 110, 0.5); }
@keyframes rd-struck {
    0%, 100% { transform: none; }
    20% { transform: translateX(-6px); background: rgba(40, 80, 10, 0.5); }
    45% { transform: translateX(5px); }
    70% { transform: translateX(-2px); }
}
.rd-card-sprite { position: relative; width: 46px; height: 46px; }
.rd-card-sprite img { width: 100%; height: 100%; object-fit: contain; }
.rd-card-name { font-weight: 800; font-size: 14px; }
.rd-card-sub { font-size: 11px; opacity: 0.7; }

/* The battery: the drained halves blacken, crack and drip away */
.rd-battery { display: inline-flex; gap: 2px; margin-top: 4px; }
.rd-battery i { position: relative; width: 11px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.rd-battery i.is-on { background: #6ee7a0; }
.rd-battery i.is-rot { background: #6ee7a0; animation: rd-rot 0.6s ease-in calc(1.15s + var(--i) * var(--step)) forwards; }
.rd-battery i.is-rot::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 100%;
    width: 5px;
    height: 8px;
    border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    background: #0e1606;
    opacity: 0;
    animation: rd-goo 0.7s ease-in calc(1.5s + var(--i) * var(--step)) forwards;
}
@keyframes rd-rot {
    40% { background: #1f3110; box-shadow: 0 0 6px rgba(110, 255, 70, 0.6); }
    100% { background: #0b1205; box-shadow: none; clip-path: polygon(0 0, 45% 0, 55% 40%, 100% 30%, 100% 100%, 0 100%); }
}
@keyframes rd-goo {
    0% { opacity: 1; transform: translateY(0) scaleY(0.6); }
    100% { opacity: 0; transform: translateY(18px) scaleY(1.6); }
}

.rd-delta {
    font-weight: 900;
    font-size: 15px;
    color: #ff8080;
    opacity: 0;
    animation: rd-pop 0.4s ease-out calc(1.3s + var(--i) * var(--step)) forwards;
}
.rd-delta.is-safe { color: #9be4ff; }
@keyframes rd-pop { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: none; } }

.rd-fate {
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 6px;
    opacity: 0;
    animation: rd-pop 0.4s ease-out calc(1.75s + var(--i) * var(--step)) forwards;
}
.rd-fate.is-lost { background: #3a0b0b; color: #ff6b6b; }
.rd-fate.is-demoted { background: #3a2a0b; color: #ffc070; }
.rd-fate.is-saved { background: #3a1d06; color: #ffb36b; }
.rd-fate.is-immune { background: #0b2a3a; color: #9be4ff; }

/* Lost: the goo swallows the sprite and the Null drinks it up as black pixels */
.rd-card.is-lost .rd-card-sprite img { animation: rd-swallow 0.9s ease-in calc(1.7s + var(--i) * var(--step)) forwards; }
@keyframes rd-swallow {
    30% { filter: brightness(0.2) sepia(1) hue-rotate(50deg) saturate(3); }
    100% { filter: brightness(0) ; opacity: 0; transform: translateY(-14px) scale(0.6); }
}
.rd-pixels { position: absolute; inset: 0; pointer-events: none; }
.rd-pixels b {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    background: #0a1004;
    box-shadow: 0 0 3px rgba(110, 255, 70, 0.5);
    opacity: 0;
    animation: rd-drink 1s ease-in calc(1.9s + var(--i) * var(--step) + var(--k) * 0.04s) forwards;
}
@keyframes rd-drink {
    0% { opacity: 1; transform: translate(var(--x), var(--y)); }
    100% { opacity: 0; transform: translate(calc(var(--x) * 0.2), -160px) scale(0.3); }
}

/* Phoenix Pearl: fire burns the goo off; Purity Opal: the tendril hits a shimmering shield and evaporates */
.rd-flame, .rd-shield { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; }
.rd-flame { background: radial-gradient(circle, rgba(255, 170, 60, 0.85), rgba(255, 80, 30, 0) 65%); animation: rd-burst 0.8s ease-out calc(1.7s + var(--i) * var(--step)) forwards; }
.rd-shield {
    border: 2px solid rgba(190, 240, 255, 0.95);
    background: repeating-conic-gradient(rgba(190, 240, 255, 0.18) 0 30deg, transparent 30deg 60deg);
    box-shadow: 0 0 14px rgba(160, 230, 255, 0.8);
    animation: rd-shield 1.1s ease-out calc(1.05s + var(--i) * var(--step)) forwards;
}
@keyframes rd-burst { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes rd-shield { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; transform: scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }

.rd-skip, .px-skip { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 12px; opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
    .rd *, .rd *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; }
    .rd-tendrils, .rd-pixels { display: none; }
}

/* ---------- The Purge: the corruption burned away ---------- */

.px {
    --d: 0s;
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: radial-gradient(ellipse at 50% 42%, rgba(80, 140, 30, 0.25), transparent 60%), #050804;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    animation: px-bg 3.8s ease-in-out calc(var(--d)) both;
}
.px.is-cleanse { --d: 0.8s; }
@keyframes px-bg {
    0%, 60% { background-color: #050804; }
    66% { background-color: #e8fbff; }
    100% { background-color: #07131d; }
}

.px-stage { position: relative; width: 220px; height: 220px; }
.px-stage img, .px-stage svg.sk-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* The true colours underneath, uncovered from the top down while the rot layer peels away */
@property --px-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.px-true {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--px-p) - 6%), transparent calc(var(--px-p) + 6%));
    mask-image: linear-gradient(to bottom, #000 calc(var(--px-p) - 6%), transparent calc(var(--px-p) + 6%));
    animation: px-uncover 1.1s cubic-bezier(0.6, 0, 0.3, 1) calc(var(--d) + 1.45s) forwards;
}
.px-rot {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--px-p) - 6%), #000 calc(var(--px-p) + 6%));
    mask-image: linear-gradient(to bottom, transparent calc(var(--px-p) - 6%), #000 calc(var(--px-p) + 6%));
    animation: px-uncover 1.1s cubic-bezier(0.6, 0, 0.3, 1) calc(var(--d) + 1.45s) forwards, px-freeze 0.4s steps(3) calc(var(--d) + 0.5s) both;
}
@keyframes px-uncover { from { --px-p: -6%; } to { --px-p: 112%; } }
@keyframes px-freeze { 0% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: none; } }

/* Fracture: light cracks spread across the rot */
.px-cracks { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; pointer-events: none; }
.px-cracks path {
    fill: none;
    stroke: #eaffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px #7ff8ff) drop-shadow(0 0 10px #36d1dc);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: px-crack 0.55s ease-out calc(var(--d) + 0.75s + var(--i) * 0.08s) forwards, px-fade 0.4s ease-in calc(var(--d) + 2.3s) forwards;
}
@keyframes px-crack { to { stroke-dashoffset: 0; } }
@keyframes px-fade { to { opacity: 0; } }

/* Shed: drips of rot fall off, and black shards spiral into a closing quarantine ring */
.px-drips i {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 9px;
    height: 16px;
    border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    background: #0d1606;
    opacity: 0;
    animation: px-shed 0.9s cubic-bezier(0.5, 0, 0.9, 0.4) calc(var(--d) + 1.5s + var(--k) * 0.05s) forwards;
}
@keyframes px-shed { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(120px) scaleY(1.8); } }

.px-shards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.px-shards b {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px;
    background: #0b1205;
    box-shadow: 0 0 4px rgba(110, 255, 70, 0.6);
    opacity: 0;
    animation: px-spiral 1s cubic-bezier(0.6, 0, 0.9, 0.6) calc(var(--d) + 1.6s + var(--k) * 0.03s) forwards;
}
@keyframes px-spiral {
    0% { opacity: 1; transform: rotate(var(--a)) translateX(70px) rotate(0); }
    100% { opacity: 0; transform: rotate(calc(var(--a) + 540deg)) translateX(0) rotate(360deg) scale(0.2); }
}
.px-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 180px;
    margin: -90px;
    border-radius: 50%;
    border: 2px dashed rgba(127, 248, 255, 0.85);
    opacity: 0;
    animation: px-close 1s ease-in calc(var(--d) + 1.6s) forwards;
}
@keyframes px-close { 0% { opacity: 0; transform: scale(1.4) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(0.1) rotate(-270deg); } }

/* Shockwave and flash */
.px-flash { position: absolute; inset: -40%; background: radial-gradient(circle, #fff 0 20%, rgba(127, 248, 255, 0.5) 40%, transparent 65%); opacity: 0; animation: px-flash 0.7s ease-out calc(var(--d) + 2.45s) forwards; }
.px-wave { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; border: 4px solid #7ff8ff; opacity: 0; animation: px-wave 0.9s ease-out calc(var(--d) + 2.45s) forwards; }
@keyframes px-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes px-wave { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(4); } }

/* True colours settle with a clean glow */
.px-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(127, 248, 255, 0.35), transparent 70%); opacity: 0; animation: px-settle 1s ease-out calc(var(--d) + 2.6s) forwards; }
@keyframes px-settle { to { opacity: 1; } }

.px-text { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-height: 120px; }
.px-stamp {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #7ff8ff;
    text-shadow: 0 0 16px rgba(127, 248, 255, 0.8);
    opacity: 0;
    animation: px-stamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) calc(var(--d) + 2.75s) forwards;
}
@keyframes px-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
.px-name { font-size: 18px; font-weight: 800; opacity: 0; animation: px-settle 0.4s ease-out calc(var(--d) + 2.95s) forwards; }
.px-variant { opacity: 0; animation: px-stamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) calc(var(--d) + 3.05s) forwards; }
.px-move {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: var(--sc-radius-pill, 999px);
    border: 1px solid rgba(255, 61, 110, 0.7);
    color: #ff9db3;
    opacity: 0;
    animation: px-settle 0.3s ease-out calc(var(--d) + 3.1s) forwards;
}
.px-move.is-lost { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6); text-decoration: line-through; }
.px-move-char { display: inline-block; opacity: 0; animation: px-char 0.05s steps(1) calc(var(--d) + 3.2s + var(--c) * 0.045s) forwards; }
@keyframes px-char { to { opacity: 1; } }
.px-where { font-size: 13px; opacity: 0; animation: px-settle 0.4s ease-out calc(var(--d) + 3.3s) forwards; }

/* Decorrupt only: the capsule docks and injects before the cracks */
.px-capsule { position: absolute; left: 50%; top: 8%; width: 44px; margin-left: -22px; opacity: 0; animation: px-dock 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.05s forwards, px-fade 0.3s ease-in 1.4s forwards; }
.px-beam { position: absolute; left: 50%; top: calc(8% + 54px); width: 6px; height: 34%; margin-left: -3px; border-radius: 3px; background: linear-gradient(to bottom, #7ff8ff, rgba(127, 248, 255, 0)); box-shadow: 0 0 12px #36d1dc; transform-origin: top; opacity: 0; animation: px-beam 0.7s ease-out 0.55s forwards; }
@keyframes px-dock { 0% { opacity: 0; transform: translateY(-120px) rotate(-30deg); } 100% { opacity: 1; transform: none; } }
@keyframes px-beam { 0% { opacity: 0; transform: scaleY(0); } 30% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
    .px *, .px { animation-duration: 0.01s !important; animation-delay: 0s !important; }
    .px-cracks, .px-shards, .px-drips, .px-ring, .px-wave, .px-flash, .px-capsule, .px-beam { display: none; }
    .px-rot { display: none; }
    .px-true { -webkit-mask-image: none; mask-image: none; }
}