/* SUTURA (92) – Voodoo Baba Szív kódex-panel (js/ui/suturaCodexUI.js).
   A Pikko-kódex elrendezését követi. Paletta: --sc-1..5 a skin palettája
   (#A673E4, #261821, #997B99, #8A57D8, #1E072D), --sc-thread a cérna,
   --sc-glow a Szív fénye, --sc-spark a kiemelés, --sc-deep / --sc-core a
   fekete-lila alap. Motívumok: cérna, gomb, öltés, tű. */
.codex-sutura-show {
    --sc-ink: #f6effd;
    --sc-soft: rgba(233, 222, 245, .84);
    --sc-line: color-mix(in srgb, var(--sc-thread) 45%, transparent);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 22px 0 30px;
    padding: 24px;
    border: 1px solid var(--sc-line);
    outline: 1px dashed color-mix(in srgb, var(--sc-accent) 45%, transparent);
    outline-offset: -7px;
    border-radius: 4px;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--sc-thread) 22%, transparent), transparent 42%),
        radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--sc-glow) 18%, transparent), transparent 40%),
        radial-gradient(ellipse 60% 40% at 50% 106%, color-mix(in srgb, var(--sc-ember) 60%, transparent), transparent 70%),
        linear-gradient(150deg, var(--sc-core), var(--sc-deep) 58%, #07020b);
    box-shadow: inset 0 0 44px color-mix(in srgb, var(--sc-glow) 14%, transparent), 0 18px 38px #0007;
    color: var(--sc-ink);
}
/* Textúra: szaggatott varrat-rács. */
.codex-sutura-show::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .12;
    background:
        repeating-linear-gradient(45deg, transparent 0 26px, var(--sc-thread) 26px 27px, transparent 27px 34px),
        repeating-linear-gradient(-45deg, transparent 0 26px, var(--sc-accent) 26px 27px, transparent 27px 34px);
    -webkit-mask: radial-gradient(ellipse at 100% 0%, #000, transparent 60%);
    mask: radial-gradient(ellipse at 100% 0%, #000, transparent 60%);
}
.codex-sutura-show > *:not(.codex-sutura-show__motif) { position: relative; z-index: 1; }
.codex-sutura-show__motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.codex-sutura-show__motif > i {
    position: absolute; left: var(--sc-x); top: var(--sc-y); width: 20px; height: 20px; opacity: .32;
    animation: scDrift 8s ease-in-out infinite alternate; animation-delay: calc(var(--sc-i) * -.9s);
}
.codex-sutura-show__motif svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--sc-accent); filter: drop-shadow(0 0 4px var(--sc-glow)); }
.codex-sutura-show__motif .is-line { fill: none; stroke: var(--sc-thread); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.codex-sutura-show__motif .is-needle svg { fill: #d9d2e6; }
.codex-sutura-show__motif .is-hole { fill: var(--sc-core); }

.codex-sutura-show > header { display: flex; gap: 18px; align-items: center; }
.codex-sutura-show__emblem { position: relative; flex: 0 0 104px; width: 104px; height: 104px; display: grid; place-items: center; }
.codex-sutura-show__emblem > i { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sc-thread) 45%, transparent), transparent 70%); animation: scBeat 1.8s ease-in-out infinite; }
.codex-sutura-heart { position: relative; width: 100%; height: 100%; overflow: visible; animation: scSpin 24s linear infinite; }
.codex-sutura-heart image { animation: scSpin 24s linear infinite reverse; transform-box: view-box; transform-origin: 60px 60px; }
.codex-sutura-heart .is-orbit { fill: none; stroke: color-mix(in srgb, var(--sc-accent) 50%, transparent); stroke-width: .8; stroke-dasharray: 3 4; }
.codex-sutura-heart .is-thread { fill: none; stroke: var(--sc-thread); stroke-width: 1.4; filter: drop-shadow(0 0 3px var(--sc-glow)); }
.codex-sutura-heart .is-needle { fill: #e6e0ef; stroke: var(--sc-core); stroke-width: .5; }
.codex-sutura-heart .is-eye { fill: var(--sc-core); }
.codex-sutura-show > header small { display: block; font-size: 11px; letter-spacing: .16em; font-weight: 800; color: var(--sc-spark); }
.codex-sutura-show > header h3 { margin: 4px 0 6px; font-size: 22px; color: #fff; text-shadow: 0 0 14px var(--sc-glow); }
.codex-sutura-show > header p { margin: 0; color: var(--sc-soft); line-height: 1.5; font-size: 14px; }

.codex-sutura-show__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 18px 0 6px; }
.codex-sutura-show__stats span { padding: 10px 8px; text-align: center; border: 1px solid var(--sc-line); border-radius: 4px; background: color-mix(in srgb, var(--sc-deep) 70%, transparent); }
.codex-sutura-show__stats b { display: block; font-size: 22px; color: #fff; text-shadow: 0 0 10px var(--sc-thread); }
.codex-sutura-show__stats small { font-size: 10px; letter-spacing: .12em; color: var(--sc-soft); font-weight: 700; }

.codex-sutura-show h4 { margin: 20px 0 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-spark); display: flex; align-items: center; gap: 10px; }
.codex-sutura-show h4::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--sc-thread) 0 6px, transparent 6px 10px); opacity: .6; }
.codex-sutura-show__note { margin: 10px 0 0; font-size: 13px; color: var(--sc-soft); line-height: 1.5; }

.codex-sutura-show__flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.codex-sutura-show__flow > span { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 4px; border: 1px solid var(--sc-line); background: color-mix(in srgb, var(--sc-core) 75%, transparent); }
.codex-sutura-show__flow img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 36px; }
.codex-sutura-show__flow b { display: block; font-size: 13px; color: #fff; }
.codex-sutura-show__flow small { font-size: 12px; color: var(--sc-soft); line-height: 1.4; }

.codex-sutura-show__levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.codex-sutura-show__levels article { padding: 12px; border-radius: 4px; border: 1px solid var(--sc-line); background: linear-gradient(160deg, color-mix(in srgb, var(--sc-thread) calc(6% + var(--sc-t) * 4%), var(--sc-core)), var(--sc-deep)); }
.codex-sutura-show__levels article.is-queen { border-color: var(--sc-thread); box-shadow: 0 0 22px color-mix(in srgb, var(--sc-glow) 40%, transparent), inset 0 0 26px color-mix(in srgb, var(--sc-thread) 22%, transparent); background: linear-gradient(160deg, #0d0314, var(--sc-deep) 50%, color-mix(in srgb, var(--sc-thread) 26%, #000)); }
.codex-sutura-show__levels article > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.codex-sutura-show__levels article > header > img { width: 34px; height: 34px; object-fit: contain; }
.codex-sutura-show__levels article > header > div { flex: 1; min-width: 0; }
.codex-sutura-show__levels small { font-size: 10px; letter-spacing: .12em; color: var(--sc-spark); font-weight: 800; }
.codex-sutura-show__levels strong { display: block; color: #fff; font-size: 15px; }
.codex-sutura-show__levels ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.codex-sutura-show__levels li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--sc-soft); line-height: 1.4; }
.codex-sutura-show__levels li img { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 4px; }
.codex-sutura-show__levels li b { color: #fff; }
.codex-sutura-seals { display: flex; gap: 4px; }
.codex-sutura-seals i { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--sc-accent); background: transparent; }
.codex-sutura-seals i.is-on { background: var(--sc-thread); box-shadow: 0 0 8px var(--sc-glow); border-color: var(--sc-spark); }
.codex-sutura-seals.is-queen i.is-on { background: var(--sc-spark); }

.codex-sutura-show__effects { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.codex-sutura-show__effects article { display: flex; gap: 12px; padding: 12px; border-radius: 4px; border: 1px solid var(--sc-line); background: color-mix(in srgb, var(--sc-core) 80%, transparent); }
.codex-sutura-show__effects article > img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; filter: drop-shadow(0 0 6px var(--sc-glow)); }
.codex-sutura-show__effects.is-compact article > img { width: 30px; height: 30px; flex-basis: 30px; }
.codex-sutura-show__effects strong { display: block; color: #fff; font-size: 14px; margin-bottom: 3px; }
.codex-sutura-show__effects p { margin: 0; font-size: 12.5px; color: var(--sc-soft); line-height: 1.45; }
.codex-sutura-show__effects [data-sc-effect="vegso"] { border-color: var(--sc-thread); box-shadow: inset 0 0 20px color-mix(in srgb, var(--sc-thread) 18%, transparent); }

.codex-sutura-show__ult { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; }
.codex-sutura-show__ult article { padding: 14px; border-radius: 4px; border: 1px solid var(--sc-line); background: linear-gradient(150deg, color-mix(in srgb, var(--sc-thread) 16%, var(--sc-core)), var(--sc-deep)); }
.codex-sutura-show__ult article.is-final { border-color: var(--sc-spark); background: linear-gradient(150deg, #0b0211, var(--sc-deep) 50%, color-mix(in srgb, var(--sc-thread) 30%, #000)); }
.codex-sutura-show__ult small { font-size: 10px; letter-spacing: .14em; color: var(--sc-spark); font-weight: 800; }
.codex-sutura-show__ult strong { display: block; font-size: 16px; color: #fff; margin: 3px 0 5px; text-shadow: 0 0 10px var(--sc-glow); }
.codex-sutura-show__ult p { margin: 0; font-size: 12.5px; color: var(--sc-soft); line-height: 1.45; }

/* A kódex képességkártyáinak Sutura-kulcsszó ikonjai és részletező sorai
   (a battlev3 a sutura-rework.css-ből kapja ugyanezt). A szint-címkék
   ("I. szint (0 Átokpecsét)") hosszúak: a címke a leírás fölé kerül. */
.ability-inline-icon.is-sutura-keyword { width: 1.35em; height: 1.35em; margin: -.3em .14em -.28em 0; object-fit: contain; filter: drop-shadow(0 0 3px #A673E4aa); }
.ability-inline-icon.is-sutura-keyword[data-sutura-keyword="kiralyno"],
.ability-inline-icon.is-sutura-keyword[data-sutura-keyword="vegso"] { filter: drop-shadow(0 0 3px #E6D2FF) drop-shadow(0 0 5px #8A57D8); }
.ability-progression.is-sutura-details .ability-progression-step.is-wide-label { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.ability-desc .ability-progression.is-sutura-details .ability-progression-step.is-wide-label .ability-progression-label { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; padding-bottom: 5px; border-bottom: 1px solid rgba(166, 115, 228, .22); }
.codex-sutura-show .ability-inline-icon,
.codex-sutura-show .ability-inline-icon.is-sutura-keyword { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .14em 0 .06em; vertical-align: -.22em; object-fit: contain; animation: none; }
/* Fejléc: egyenletes sorköz, az ikonok nem tolják szét a sorokat. */
.codex-sutura-show > header > div { display: grid; gap: 6px; min-width: 0; }
.codex-sutura-show > header h3,
.codex-sutura-show > header p,
.codex-sutura-show > header small { margin: 0; }
.codex-sutura-show > header h3 { line-height: 1.25; }
.codex-sutura-show > header h3 .ability-inline-icon { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.codex-sutura-show > header p { line-height: 1.6; }

@keyframes scDrift { from { transform: translate(0, 0) rotate(-8deg); } to { transform: translate(8px, -10px) rotate(10deg); } }
@keyframes scSpin { to { rotate: 360deg; } }
@keyframes scBeat { 0%, 100% { scale: 1; opacity: .7; } 14% { scale: 1.14; opacity: 1; } 28% { scale: .98; } 42% { scale: 1.08; } }
@media (max-width: 560px) {
    .codex-sutura-show { padding: 16px; }
    .codex-sutura-show > header { flex-direction: column; text-align: center; }
}
.codex-sutura-show[data-sc-theme="rend"] {
    border-color: #B41D26;
    background: radial-gradient(ellipse at 85% 4%, #4F000866, transparent 45%), linear-gradient(145deg, #1C1315, #120a10 65%, #2D0000);
}
.codex-sutura-show[data-sc-theme="rend"] .codex-sutura-heart .is-thread { stroke-dasharray: 4 2; stroke: #B1695E; }
.codex-sutura-show[data-sc-theme="rend"] .codex-sutura-show__motif .is-moon { color: #B41D26; filter: drop-shadow(0 0 5px #B41D26); }
.codex-sutura-show[data-sc-theme="rend"] .codex-sutura-show__emblem { filter: drop-shadow(0 0 7px #B41D2666); }
@media (prefers-reduced-motion: reduce) {
    .codex-sutura-show *, .codex-sutura-show *::before { animation: none !important; }
}