/* Jelly's single Codex mechanic panel follows the established rework layout. */
.codex-jelly-cells {
    --jc-hi: color-mix(in srgb, var(--jc2) 72%, #fff);
    --jc-ink: #f5faff;
    --jc-soft: rgba(219, 237, 250, .82);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 22px 0 30px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--jc2) 55%, transparent);
    outline: 1px solid color-mix(in srgb, var(--jc4) 38%, transparent);
    outline-offset: -6px;
    background: radial-gradient(circle at 9% 0%, color-mix(in srgb, var(--jc4) 25%, transparent), transparent 43%), radial-gradient(circle at 91% 100%, color-mix(in srgb, var(--jc5) 29%, transparent), transparent 49%), linear-gradient(145deg, #101b32, #060b1d 58%, #100a27);
    box-shadow: inset 0 0 40px color-mix(in srgb, var(--jc4) 16%, transparent), 0 18px 38px #0007;
    color: var(--jc-ink);
}
.codex-jelly-cells[data-j-motif="academy"] {
    --jc-hi: color-mix(in srgb, var(--jc3) 53%, #fff);
    background: radial-gradient(circle at 9% 0%, #9a5aed48, transparent 43%), radial-gradient(circle at 91% 100%, #511dd04a, transparent 49%), linear-gradient(145deg, #1d1435, #0d0a1f 58%, #1c0b31);
}
.codex-jelly-cells::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .22;
    background: radial-gradient(circle, transparent 24px, color-mix(in srgb, var(--jc2) 34%, transparent) 25px, transparent 26px) 0 0 / 145px 145px, radial-gradient(circle, transparent 12px, color-mix(in srgb, var(--jc4) 37%, transparent) 13px, transparent 14px) 67px 81px / 145px 145px;
}
.codex-jelly-cells[data-j-motif="academy"]::before {
    opacity: .18;
    background: radial-gradient(circle, transparent 24px, #b892ff 25px, transparent 26px) 0 0 / 145px 145px, radial-gradient(circle, transparent 12px, #7645d4 13px, transparent 14px) 67px 81px / 145px 145px;
}
.codex-jelly-cells > *:not(.codex-jelly-cells__particles) { position: relative; z-index: 1; }
.codex-jelly-cells__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.codex-jelly-cells__particles i {
    position: absolute;
    left: var(--j-x);
    top: var(--j-y);
    width: 9px;
    height: 9px;
    border: 1px solid color-mix(in srgb, var(--jc2) 70%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #ffffffba, color-mix(in srgb, var(--jc4) 38%, transparent) 45%, transparent 80%);
    box-shadow: 0 0 9px color-mix(in srgb, var(--jc2) 62%, transparent);
    animation: codexJellyDrift 6s ease-in-out infinite;
    animation-delay: calc(var(--j-i) * -.37s);
}
.codex-jelly-cells__particles i:nth-child(3n) { width: 5px; height: 5px; }
.codex-jelly-cells[data-j-motif="academy"] .codex-jelly-cells__particles i:nth-child(3n) {
    width: 15px;
    height: 8px;
    border: 0;
    border-radius: 0;
    background: #ab83ff;
    clip-path: polygon(0 20%, 20% 0, 38% 45%, 50% 20%, 62% 45%, 80% 0, 100% 20%, 78% 100%, 50% 63%, 22% 100%);
}
.codex-jelly-cells[data-j-motif="academy"] .codex-jelly-cells__particles i:nth-child(5n) {
    width: 7px;
    height: 9px;
    border: 0;
    border-radius: 0;
    background: #8c6bd5;
    clip-path: polygon(50% 0, 79% 18%, 100% 79%, 66% 100%, 50% 79%, 34% 100%, 0 79%, 21% 18%);
}
.codex-jelly-cells > header { display: flex; align-items: center; gap: 18px; }
.codex-jelly-cells__emblem { position: relative; flex: 0 0 104px; width: 104px; height: 92px; }
.codex-jelly-cells__emblem i {
    position: absolute;
    inset: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--jc2) 72%, transparent);
    border-radius: 48% 52% 55% 45%;
    background: radial-gradient(circle, color-mix(in srgb, var(--jc4) 27%, transparent), #05132c66 66%, transparent 72%);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--jc4) 60%, transparent), 0 0 16px color-mix(in srgb, var(--jc2) 40%, transparent);
    animation: codexJellyMembrane 5s ease-in-out infinite;
}
.codex-jelly-cells__emblem > img { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; object-fit: contain; filter: drop-shadow(0 0 10px var(--jc2)); animation: codexJellyBob 3s ease-in-out infinite; }
.codex-jelly-cells__emblem b { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border: 1px solid var(--jc2); border-radius: 50%; background: color-mix(in srgb, var(--jc4) 65%, #fff); box-shadow: 0 0 7px var(--jc2); animation: codexJellyOrbit 5.4s linear infinite; }
.codex-jelly-cells__emblem b:nth-of-type(2) { animation-delay: -1.8s; }
.codex-jelly-cells__emblem b:nth-of-type(3) { animation-delay: -3.6s; }
.codex-jelly-cells > header > div > span { color: var(--jc-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-jelly-cells > header h3 { margin: 7px 0 5px; color: var(--jc-ink); font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--jc2) 60%, transparent); }
.codex-jelly-cells > header p { margin: 0; color: var(--jc-soft); font-size: .74rem; line-height: 1.45; }
.codex-jelly-cells__stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.codex-jelly-cells__stats > span { display: grid; gap: 4px; justify-items: center; padding: 9px 6px; border: 1px solid color-mix(in srgb, var(--jc2) 37%, transparent); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--jc4) 22%, transparent), #0007); }
.codex-jelly-cells__stats b { color: var(--jc-hi); font: 800 1rem/1 Montserrat,sans-serif; white-space: nowrap; }
.codex-jelly-cells__stats small { color: var(--jc-soft); font-size: .58rem; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.codex-jelly-cells > h4 { margin: 20px 0 10px; color: var(--jc-hi); font: 800 .66rem/1 Montserrat,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-jelly-cells__tiers { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.codex-jelly-cells__tiers article { display: grid; align-content: start; justify-items: center; gap: 7px; min-height: 168px; padding: 14px 10px; text-align: center; border: 1px solid color-mix(in srgb, var(--jc2) 42%, transparent); border-radius: 12px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--jc4) 22%, transparent), transparent 62%), linear-gradient(180deg, #ffffff0a, #0007); box-shadow: inset 0 0 18px #0006; }
.codex-jelly-cells__tiers article[data-cells="0"] { border-color: color-mix(in srgb, var(--jc2) 25%, transparent); }
.codex-jelly-cells__tiers article[data-cells="3"] { border-color: var(--jc2); box-shadow: inset 0 0 18px #0006, 0 0 16px color-mix(in srgb, var(--jc2) 32%, transparent); }
.codex-jelly-cells__orb { position: relative; display: grid; place-items: center; width: 60px; height: 56px; }
.codex-jelly-cells__orb::before { content: ""; position: absolute; inset: 4px 6px; border: 1px solid color-mix(in srgb, var(--jc2) 40%, transparent); border-radius: 50%; box-shadow: inset 0 0 12px color-mix(in srgb, var(--jc4) 35%, transparent); }
.codex-jelly-cells__orb img { position: relative; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 8px var(--jc2)); animation: codexJellyBob 3s ease-in-out infinite; }
.codex-jelly-cells__tiers article[data-cells="0"] .codex-jelly-cells__orb img { opacity: .45; filter: grayscale(.35); }
.codex-jelly-cells__tiers small { color: var(--jc-hi); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; }
.codex-jelly-cells__tiers strong { display: block; margin-top: 2px; color: var(--jc-ink); font: 800 .8rem/1.15 Montserrat,sans-serif; }
.codex-jelly-cells__tiers p { margin: 0; color: var(--jc-soft); font-size: .65rem; line-height: 1.35; }
.codex-jelly-cells__ultimate { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.codex-jelly-cells__ultimate article { display: grid; gap: 5px; justify-items: center; align-content: start; padding: 11px 9px; border: 1px solid color-mix(in srgb, var(--jc2) 38%, transparent); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--jc4) 16%, transparent), #0007); text-align: center; }
.codex-jelly-cells__ultimate article.is-peak { border-color: var(--jc2); box-shadow: 0 0 14px color-mix(in srgb, var(--jc2) 26%, transparent); }
.codex-jelly-cells__ultimate small { color: var(--jc-hi); font: 800 .56rem/1.2 Montserrat,sans-serif; letter-spacing: .1em; }
.codex-jelly-cells__ultimate b { color: var(--jc-ink); font: 900 1.2rem/1 Montserrat,sans-serif; text-shadow: 0 0 9px var(--jc2); }
.codex-jelly-cells__ultimate span { color: var(--jc-soft); font-size: .64rem; }
.codex-jelly-cells__ultimate p { margin: 2px 0 0; color: var(--jc-soft); font-size: .6rem; line-height: 1.35; }
.codex-jelly-cells__effects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.codex-jelly-cells__effects article { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; align-items: center; min-width: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--jc2) 42%, transparent); border-radius: 12px; background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--jc4) 18%, transparent), transparent 60%), #0005; }
.codex-jelly-cells__effects article:nth-child(2n) { border-color: color-mix(in srgb, var(--jc4) 55%, transparent); }
.codex-jelly-cells__effects img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px var(--jc2)); animation: codexJellyBob 3s ease-in-out infinite; }
.codex-jelly-cells__effects strong { display: block; margin-bottom: 4px; color: var(--jc-ink); font: 800 .8rem/1.15 Montserrat,sans-serif; }
.codex-jelly-cells__effects p { margin: 0; color: var(--jc-soft); font-size: .66rem; line-height: 1.35; }
.codex-jelly-cells .ability-inline-icon { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .12em; vertical-align: -.22em; object-fit: contain; }
@keyframes codexJellyBob { 50% { transform: translateY(-4px); } }
@keyframes codexJellyMembrane { 50% { border-radius: 55% 45% 47% 53%; transform: scale(1.04); } }
@keyframes codexJellyOrbit { from { transform: rotate(0) translateX(43px) rotate(0); } to { transform: rotate(360deg) translateX(43px) rotate(-360deg); } }
@keyframes codexJellyDrift { 0%,100% { opacity: 0; transform: translate(0,7px); } 25% { opacity: .7; } 65% { opacity: .45; transform: translate(13px,-17px); } }
@media (max-width: 900px) { .codex-jelly-cells__stats { grid-template-columns: repeat(3,minmax(0,1fr)); } .codex-jelly-cells__tiers { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .codex-jelly-cells { padding: 18px 16px; } .codex-jelly-cells > header { flex-direction: column; align-items: flex-start; } .codex-jelly-cells__stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-jelly-cells__ultimate, .codex-jelly-cells__effects { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-jelly-cells__particles, .codex-jelly-cells__emblem b { display: none; } .codex-jelly-cells__emblem i, .codex-jelly-cells__emblem img, .codex-jelly-cells__orb img, .codex-jelly-cells__effects img { animation: none; } }