/* Kuro v2 (20/10/2026): cartel de manga de las fichas (capas SVG apiladas en .k-stack), tarjetas con busto de la biblioteca y su animación.
 * Las animaciones usan solo transform y opacity sobre capas enteras (compositor), duran poco en bucle y se apagan con prefers-reduced-motion. */
.k-stack{position:relative;width:100%;aspect-ratio:420/560;--k-a:#c8f060;--k-wrap:#ff5b2e;--k-jp:"Yu Gothic","Hiragino Sans","Noto Sans CJK JP","Noto Sans JP","Meiryo",sans-serif}
.k-stack>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.mal-kuro{position:relative;width:100%;max-width:390px;justify-self:center}
.mal-kuro .mal-credit{margin-top:.9rem}
.mal-hero__art--k{max-width:420px}

/* biblioteca: tarjetas con busto, efecto de sonido y kanji de tipo */
.k-sprite{position:absolute;width:0;height:0;overflow:hidden}
.mal-tiles--k{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.8rem}
.mal .mal-tile--k{display:flex;flex-direction:column;gap:0;padding:0;min-height:0;border:1px solid color-mix(in srgb,var(--k-a) 55%,#0b0b0b);background:#0e0d0d;overflow:hidden;--k-jp:"Yu Gothic","Hiragino Sans","Noto Sans CJK JP","Noto Sans JP","Meiryo",sans-serif;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.mal .mal-tile--k:hover{border-color:var(--k-a);background:#0e0d0d;transform:none}
.mal .mal-tile--k[aria-current="true"]{border-color:var(--k-a);background:#0e0d0d;box-shadow:0 0 0 2px var(--k-a)}
.k-card{position:relative;display:block;width:100%;aspect-ratio:1/1.02;overflow:hidden;container-type:inline-size;background:radial-gradient(75% 62% at 50% 62%,color-mix(in srgb,var(--k-a) 40%,transparent),transparent 72%),repeating-conic-gradient(from 6deg at 50% 66%,color-mix(in srgb,var(--k-a) 20%,transparent) 0 1.8deg,transparent 1.8deg 9deg),#0d0c0c}
.k-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--k-a) 60%,transparent) 1.2px,transparent 1.6px);background-size:8px 8px;-webkit-mask-image:linear-gradient(35deg,#000 0,transparent 55%);mask-image:linear-gradient(35deg,#000 0,transparent 55%);opacity:.5}
.k-card__sfx{position:absolute;left:3%;top:-2%;font:900 44cqw/1 var(--k-jp);color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--k-a) 85%,transparent);transform:rotate(-8deg);transform-origin:0 100%;white-space:nowrap;pointer-events:none;opacity:.85}
.k-card__bust{position:absolute;left:50%;bottom:-2%;width:78%;height:auto;transform:translateX(-50%);display:block;transition:transform .22s cubic-bezier(.23,1,.32,1)}
.k-card__kanji{position:absolute;right:0;top:0;width:12cqw;min-width:1.9rem;padding:.3rem 0 .5rem;background:var(--k-a);color:#09090d;font:900 1.3rem/1 var(--k-jp);text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%)}
.k-card__body{display:grid;gap:.18rem;padding:.7rem .8rem .85rem;border-top:3px solid var(--k-a)}
.mal-tile--k .k-card__body b{font:700 1.15rem/1.1 var(--m-disp);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.mal-tile--k .k-card__body small{font-size:.76rem;color:var(--m-mute)}
.mal-tile--k .k-card__body .mal-tag{font-size:.72rem;color:color-mix(in srgb,var(--k-a) 80%,#fff)}
.k-legend{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin:0 0 1.1rem;padding:0;list-style:none;font-size:.82rem;color:var(--m-mute)}
.k-legend li{display:inline-flex;align-items:center;gap:.45rem}
.k-legend b{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;background:var(--k-a);color:#09090d;font:900 1rem/1 "Yu Gothic","Hiragino Sans","Noto Sans CJK JP","Noto Sans JP","Meiryo",sans-serif}
/* lista de personajes parecidos: insignia con el kanji del tipo */
.mal .mal-mono--k{background:var(--k-a);color:#09090d;font-family:"Yu Gothic","Hiragino Sans","Noto Sans CJK JP","Noto Sans JP","Meiryo",sans-serif;font-weight:900;font-size:1.35rem}

@media (hover:hover) and (pointer:fine){
  .mal-tile--k:hover .k-card__bust{transform:translateX(-50%) translateY(-5px)}
}

/* móvil: dos tarjetas por fila (23 personajes en una sola columna eran ~12.000 px de scroll) */
@media (max-width:560px){
  .mal-tiles--k{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .mal .mal-tile--k{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
  .k-card__body{padding:.5rem .6rem .65rem}
  .mal-tile--k .k-card__body b{font-size:1rem}
  .mal-tile--k .k-card__body small,.mal-tile--k .k-card__body .mal-tag{font-size:.7rem}
  .k-card__kanji{font-size:1.1rem}
}

/* Los bucles empiezan --k-d después de cargar (el cartel entra una vez y se queda quieto): un movimiento continuo desde el primer fotograma
   hace que PageSpeed no dé la página por «visualmente completa» (Speed Index 4,1 s con la portada en 97). Las fases se desplazan sumando
   el retraso en vez de restarlo. */
@media (prefers-reduced-motion:no-preference){
  .k-stack{--k-d:8s;animation:k-in .7s cubic-bezier(.23,1,.32,1) both}
  .k-fig{animation:k-bob 3.8s ease-in-out var(--k-d) infinite backwards}
  .k-lines0{animation:k-flick 2.4s steps(1,end) var(--k-d) infinite backwards}
  .k-lines1{animation:k-flick 2.4s steps(1,end) calc(var(--k-d) + 1.2s) infinite backwards}
  .k-sfx{animation:k-shake 2.6s steps(1,end) var(--k-d) infinite backwards}
  .k-aura{animation:k-aura 2.2s ease-in-out var(--k-d) infinite alternate backwards}
  .k-sp{transform-box:fill-box;transform-origin:center;animation:k-twinkle 2.4s ease-in-out var(--k-d) infinite backwards}
  .k-sp1{animation-delay:calc(var(--k-d) + .8s)}
  .k-sp2{animation-delay:calc(var(--k-d) + 1.6s)}
  @keyframes k-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes k-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @keyframes k-flick{0%{opacity:1}34%{opacity:.35}67%{opacity:.7}}
  @keyframes k-shake{0%{transform:translate(0,0)}20%{transform:translate(2px,-1px)}40%{transform:translate(-1px,1.5px)}60%{transform:translate(1.5px,1px)}80%{transform:translate(-2px,-.5px)}}
  @keyframes k-aura{from{opacity:.65;transform:translateY(0)}to{opacity:1;transform:translateY(-4px)}}
  @keyframes k-twinkle{0%,100%{opacity:.35;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
}