/* HERALDA (76) – Kozmikus Lények kódex-panel (js/ui/heraldaCodexUI.js).
   A korábbi reworkök (Hiratus, Jelly) elrendezését követi. Paletta:
   --hc1..--hc5 a skin öt színe, --hr-* / --hr-worm-* a vektoros férgeké.
   Alap: csillagpor és köd; Rém Akadémia: pókháló, pók és denevér. */
.codex-heralda-nest {
    --hc-hi: color-mix(in srgb, var(--hr-glow) 62%, #fff);
    --hc-ink: #fbf6ff;
    --hc-soft: rgba(233, 221, 247, .82);
    --hc-line: color-mix(in srgb, var(--hr-main) 55%, transparent);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 22px 0 30px;
    padding: 24px;
    border: 1px solid var(--hc-line);
    outline: 1px solid color-mix(in srgb, var(--hr-glow) 30%, transparent);
    outline-offset: -6px;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--hr-main) 30%, transparent), transparent 44%),
        radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--hr-glow) 20%, transparent), transparent 48%),
        linear-gradient(145deg, #140a1f, #07030b 58%, #150816);
    box-shadow: inset 0 0 42px color-mix(in srgb, var(--hr-main) 18%, transparent), 0 18px 38px #0007;
    color: var(--hc-ink);
}
.codex-heralda-nest[data-hc-motif="spooky"] {
    --hc-hi: color-mix(in srgb, var(--hr-glow) 55%, #fff);
    background:
        radial-gradient(circle at 8% 0%, #9a5aed40, transparent 44%),
        radial-gradient(circle at 92% 100%, #5b6fd333, transparent 48%),
        linear-gradient(145deg, #1a1036, #0b0819 58%, #1b0b30);
}
/* Háttér: csillagpor (alap) vagy pókháló a sarokban (Rém Akadémia). */
.codex-heralda-nest::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background:
        radial-gradient(circle at 14% 30%, #fffcff99 0 1px, transparent 2px),
        radial-gradient(circle at 63% 12%, #eb80c788 0 1.4px, transparent 3px),
        radial-gradient(circle at 81% 58%, #a081c699 0 1px, transparent 2px),
        radial-gradient(circle at 36% 86%, #fffcff77 0 1px, transparent 2px);
    background-size: 190px 150px;
}
.codex-heralda-nest[data-hc-motif="spooky"]::before {
    opacity: .38;
    background:
        repeating-conic-gradient(from 90deg at 100% 0, transparent 0 11deg, #9a5aed55 11deg 11.6deg),
        radial-gradient(circle at 100% 0, transparent 0 34px, #9a5aed44 35px 36px, transparent 37px 68px, #9a5aed38 69px 70px, transparent 71px 104px, #9a5aed2e 105px 106px, transparent 107px);
    background-size: 220px 220px;
    background-position: 100% 0;
    background-repeat: no-repeat;
}
.codex-heralda-nest > *:not(.codex-heralda-nest__motif):not(.codex-heralda-nest__crawlers) { position: relative; z-index: 1; }
.codex-heralda-nest__motif, .codex-heralda-nest__crawlers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.codex-heralda-nest__motif i {
    position: absolute;
    left: var(--hc-x);
    top: var(--hc-y);
    width: 7px;
    height: 7px;
    background: var(--hr-soft);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter: drop-shadow(0 0 4px var(--hr-glow));
    opacity: .6;
    animation: hcTwinkle 4.6s ease-in-out infinite;
    animation-delay: calc(var(--hc-i) * -.41s);
}
.codex-heralda-nest__motif i:nth-child(3n) { width: 4px; height: 4px; background: var(--hr-glow); }
.codex-heralda-nest[data-hc-motif="spooky"] .codex-heralda-nest__motif i:nth-child(odd) {
    width: 18px;
    height: 8px;
    background: var(--hr-main);
    clip-path: polygon(0 30%, 22% 0, 38% 45%, 50% 20%, 62% 45%, 78% 0, 100% 30%, 70% 100%, 50% 70%, 30% 100%);
    animation: hcBat 7s ease-in-out infinite;
    animation-delay: calc(var(--hc-i) * -.53s);
}
.codex-heralda-nest[data-hc-motif="spooky"] .codex-heralda-nest__motif i:nth-child(4n) {
    width: 9px;
    height: 11px;
    background: radial-gradient(circle at 50% 30%, var(--hr-glow) 0 2.5px, transparent 3px), radial-gradient(circle at 50% 68%, var(--hr-main) 0 3.5px, transparent 4px);
    clip-path: none;
    animation: hcSpider 5s ease-in-out infinite;
}
/* Háttérben lassan kúszó vektoros férgek. */
.codex-heralda-nest__crawlers > span {
    position: absolute;
    width: 118px;
    height: 38px;
    opacity: .34;
    animation: hcCrawl 26s linear infinite;
    animation-delay: calc(var(--hc-w) * -8.7s);
}
.codex-heralda-nest__crawlers > span:nth-child(1) { top: 16%; }
.codex-heralda-nest__crawlers > span:nth-child(2) { top: 54%; opacity: .42; width: 140px; height: 46px; }
.codex-heralda-nest__crawlers > span:nth-child(3) { top: 84%; }
.codex-heralda-nest > header { display: flex; align-items: center; gap: 18px; }
.codex-heralda-nest__emblem { position: relative; flex: 0 0 104px; width: 104px; height: 96px; }
.codex-heralda-nest__emblem i {
    position: absolute;
    inset: 6px 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--hr-deep) 45%, #000) 34%, transparent 35%),
        conic-gradient(from 0deg, color-mix(in srgb, var(--hr-main) 70%, transparent), transparent 25%, color-mix(in srgb, var(--hr-glow) 55%, transparent) 50%, transparent 75%, color-mix(in srgb, var(--hr-main) 70%, transparent));
    box-shadow: inset 0 0 18px #000c, 0 0 18px color-mix(in srgb, var(--hr-main) 50%, transparent);
    animation: hcVortex 9s linear infinite;
}
.codex-heralda-nest__emblem > img { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; object-fit: contain; filter: drop-shadow(0 0 4px #fff5) drop-shadow(0 0 12px var(--hr-glow)); animation: hcBob 3.2s ease-in-out infinite; }
.codex-heralda-nest > header small { color: var(--hc-hi); font: 800 .58rem/1 Montserrat, sans-serif; letter-spacing: .18em; }
.codex-heralda-nest > header h3 { margin: 7px 0 5px; color: var(--hc-ink); font: 400 1.65rem/1.1 AOW, serif; text-shadow: 0 0 16px color-mix(in srgb, var(--hr-glow) 55%, transparent); }
.codex-heralda-nest > header p { margin: 0; color: var(--hc-soft); font-size: .74rem; line-height: 1.45; }
.codex-heralda-nest__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.codex-heralda-nest__stats > span { display: grid; gap: 4px; justify-items: center; padding: 9px 6px; border: 1px solid color-mix(in srgb, var(--hr-main) 45%, transparent); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--hr-main) 22%, transparent), #0007); }
.codex-heralda-nest__stats b { color: var(--hc-hi); font: 800 1rem/1 Montserrat, sans-serif; white-space: nowrap; }
.codex-heralda-nest__stats small { color: var(--hc-soft); font-size: .56rem; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.codex-heralda-nest > h4 { margin: 20px 0 10px; color: var(--hc-hi); font: 800 .66rem/1 Montserrat, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-heralda-nest__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.codex-heralda-nest__flow > span { display: flex; flex: 1 1 170px; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--hr-main) 42%, transparent); border-radius: 12px; background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--hr-main) 20%, transparent), transparent 62%), #0005; }
.codex-heralda-nest__flow > span > img { flex: 0 0 38px; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px var(--hr-glow)); }
.codex-heralda-nest__flow b { display: block; color: var(--hc-ink); font: 800 .74rem/1.15 Montserrat, sans-serif; }
.codex-heralda-nest__flow small { color: var(--hc-soft); font-size: .62rem; }
.codex-heralda-nest__flow > i { color: var(--hc-hi); font: 900 1rem/1 Montserrat, sans-serif; font-style: normal; }
.codex-heralda-nest__stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.codex-heralda-nest__stages 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(--hr-main) 42%, transparent); border-radius: 12px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--hr-main) 22%, transparent), transparent 62%), linear-gradient(180deg, #ffffff0a, #0007); box-shadow: inset 0 0 18px #0006; }
.codex-heralda-nest__stages article.is-peak { border-color: var(--hr-glow); box-shadow: inset 0 0 18px #0006, 0 0 16px color-mix(in srgb, var(--hr-glow) 32%, transparent); }
.codex-heralda-nest__orb { position: relative; display: grid; place-items: center; width: 92px; height: 44px; }
.codex-heralda-nest__orb::before { content: ""; position: absolute; inset: 2px 10px; border: 1px solid color-mix(in srgb, var(--hr-main) 40%, transparent); border-radius: 50%; box-shadow: inset 0 0 12px color-mix(in srgb, var(--hr-main) 35%, transparent); }
.codex-heralda-nest__orb .hr-worm { position: relative; width: 84px; height: 30px; }
.codex-heralda-nest__stages article[data-kind="normal"] .hr-worm { opacity: .78; }
.codex-heralda-nest__stages article[data-kind="devourer"] .hr-worm { width: 92px; height: 34px; }
.codex-heralda-nest__stages small { color: var(--hc-hi); font: 800 .56rem/1 Montserrat, sans-serif; letter-spacing: .12em; }
.codex-heralda-nest__stages strong { display: block; margin-top: 2px; color: var(--hc-ink); font: 800 .8rem/1.15 Montserrat, sans-serif; }
.codex-heralda-nest__stages p { margin: 0; color: var(--hc-soft); font-size: .65rem; line-height: 1.35; }
.codex-heralda-nest__effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.codex-heralda-nest__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(--hr-main) 42%, transparent); border-radius: 12px; background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--hr-main) 18%, transparent), transparent 60%), #0005; }
.codex-heralda-nest__effects article:nth-child(2n) { border-color: color-mix(in srgb, var(--hr-glow) 45%, transparent); }
.codex-heralda-nest__effects img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px var(--hr-glow)); animation: hcBob 3.2s ease-in-out infinite; }
.codex-heralda-nest__effects strong { display: block; margin-bottom: 4px; color: var(--hc-ink); font: 800 .8rem/1.15 Montserrat, sans-serif; }
.codex-heralda-nest__effects p { margin: 0; color: var(--hc-soft); font-size: .66rem; line-height: 1.35; }
.codex-heralda-nest .ability-inline-icon { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .12em; vertical-align: -.22em; object-fit: contain; animation: none; }
@keyframes hcBob { 50% { transform: translateY(-4px); } }
@keyframes hcVortex { to { transform: rotate(360deg); } }
@keyframes hcTwinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .75; transform: scale(1.1); } }
@keyframes hcBat { 0%, 100% { transform: translate(0, 0) scaleX(1); } 25% { transform: translate(14px, -8px) scaleX(.6); } 50% { transform: translate(28px, 2px) scaleX(1); } 75% { transform: translate(12px, 8px) scaleX(.6); } }
@keyframes hcSpider { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes hcCrawl { from { left: -160px; } to { left: calc(100% + 20px); } }
@media (max-width: 900px) { .codex-heralda-nest__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .codex-heralda-nest__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .codex-heralda-nest { padding: 18px 16px; } .codex-heralda-nest > header { flex-direction: column; align-items: flex-start; } .codex-heralda-nest__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .codex-heralda-nest__effects { grid-template-columns: 1fr; } .codex-heralda-nest__flow > i { display: none; } }
@media (prefers-reduced-motion: reduce) { .codex-heralda-nest__motif, .codex-heralda-nest__crawlers { display: none; } .codex-heralda-nest__emblem i, .codex-heralda-nest__emblem img, .codex-heralda-nest__effects img, .codex-heralda-nest .hr-worm__seg { animation: none; } }