.kp-doll {
--doll-cell: clamp(20px, 6vw, 72px);
--doll-gap: calc(var(--doll-cell) * 0.1);
--doll-avatar-w: calc(var(--doll-cell) * 2.5);
width: 100%;
display: flex;
justify-content: center;
}
.kp-doll--xs { --doll-cell: clamp(14px, 4vw, 20px); }
.kp-doll--sm { --doll-cell: clamp(20px, 5vw, 28px); }
.kp-doll--md { --doll-cell: clamp(40px, 8vw, 56px); }
.kp-doll--lg { --doll-cell: clamp(56px, 10vw, 72px); }
.kp-doll__grid {
display: grid;
grid-template-columns: auto var(--doll-avatar-w) auto;
gap: calc(var(--doll-gap) * 1.4);
justify-content: center;
align-items: stretch;
max-width: 100%;
}
.kp-doll__col {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--doll-gap);
flex-shrink: 0;
}
.kp-doll__slot {
width: var(--doll-cell);
height: var(--doll-cell);
border-radius: calc(var(--doll-cell) * 0.18);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.kp-doll__slot--equipped {
background: color-mix(in srgb, var(--n-accent) 10%, var(--n-bg-2, #16161f));
border: 1px solid color-mix(in srgb, var(--n-accent) 28%, transparent);
}
.kp-doll__slot--empty {
background: color-mix(in srgb, var(--n-text, #888) 5%, transparent);
border: 1px dashed color-mix(in srgb, var(--n-text, #888) 16%, transparent);
}
.kp-doll__slot--equipped::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
}
.kp-doll__slot.kp-doll__slot--legendary::after  { background: var(--n-gold, #f0b232); }
.kp-doll__slot.kp-doll__slot--epic::after { background: var(--n-lav, #a855f7); }
.kp-doll__slot.kp-doll__slot--rare::after { background: var(--n-cyan, #38bdf8); }
.kp-doll__slot.kp-doll__slot--common::after  { background: transparent; }
.kp-doll__slot .kp-item-icon {
width: 100%;
height: 100%;
}
.kp-doll__slot .kp-item-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.kp-doll__slot-icon {
font-size: calc(var(--doll-cell) * 0.5);
line-height: 1;
}
.kp-doll__ph {
font-size: calc(var(--doll-cell) * 0.42);
line-height: 1;
opacity: 0.28;
}
/* v1.1.5.034: PNG-плейсхолдер порожнього слота (slot_<slot> іконки) */
.kp-doll__slot--empty .kp-item-icon { opacity: .32; }
.kp-doll__slot--empty img.kp-item-icon { object-fit: contain; }
/* чорний лайн-арт → світлий на темній темі */
[data-theme="dark"] .kp-doll__slot--empty img.kp-item-icon { filter: invert(1); }
/* emoji-fallback (нема PNG): повертаємо авто-розмір + шрифт, бо kp-item-icon має width/height:100% */
.kp-doll__slot--empty .kp-item-icon--emoji {
width: auto;
height: auto;
font-size: calc(var(--doll-cell) * 0.42);
line-height: 1;
}
.kp-doll__slot-upgrade {
position: absolute;
top: 1px; left: 2px;
font-size: calc(var(--doll-cell) * 0.24);
font-weight: 700;
font-family: var(--n-font-mono, monospace);
color: var(--n-accent);
background: rgba(0,0,0,.55);
border-radius: 3px;
padding: 0 2px;
line-height: 1.3;
z-index: 2;
}
.kp-doll__center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--doll-gap);
}
.kp-doll__avatar {
width: var(--doll-avatar-w);
flex: 1 1 auto;
min-height: calc(var(--doll-avatar-w) * 1.2);
border-radius: calc(var(--doll-cell) * 0.22);
position: relative;
overflow: hidden;
background: color-mix(in srgb, var(--n-text, #888) 8%, var(--n-bg-2, #16161f));
border: 1px solid color-mix(in srgb, var(--n-accent) 20%, transparent);
display: flex;
align-items: center;
justify-content: center;
}
.kp-doll__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kp-doll__initial {
font-size: calc(var(--doll-avatar-w) * 0.4);
font-weight: 800;
color: var(--n-accent);
font-family: var(--n-font-display, sans-serif);
}
.kp-doll__corner {
position: absolute;
width: calc(var(--doll-cell) * 0.16);
height: calc(var(--doll-cell) * 0.16);
border: 2px solid var(--n-accent);
opacity: .35;
pointer-events: none;
}
.kp-doll__corner--tl { top: 4px; left: 4px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.kp-doll__corner--tr { top: 4px; right: 4px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.kp-doll__corner--bl { bottom: 4px; left: 4px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.kp-doll__corner--br { bottom: 4px; right: 4px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }
.kp-doll__hp {
position: relative;
flex-shrink: 0;
width: var(--doll-avatar-w);
max-width: 100%;
height: calc(var(--doll-cell) * 0.32);
min-height: 14px;
border-radius: 999px;
background: color-mix(in srgb, var(--n-text, #888) 14%, transparent);
overflow: hidden;
}
.kp-doll__hp-fill {
position: absolute;
inset: 0 auto 0 0;
height: 100%;
background: linear-gradient(90deg, var(--arena-green), color-mix(in srgb, var(--arena-green) 72%, #000));
border-radius: 999px;
transition: width .3s ease;
}
.kp-doll__hp-txt {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: calc(var(--doll-cell) * 0.2);
min-font-size: 9px;
font-weight: 700;
color: var(--n-text-on-accent);
text-shadow: 0 1px 2px rgba(0,0,0,.55);
font-family: var(--n-font-mono, monospace);
white-space: nowrap;
}
.kp-doll--xs .kp-doll__hp-txt {
font-size: 9px;
}
/* ─────────────────────────────────────────────────────────────
   v1.1.5.057: клітинка-предмет = кнопка (клік → модалка-опис)
   ───────────────────────────────────────────────────────────── */
button.kp-doll__slot { appearance: none; font: inherit; color: inherit; padding: 0; cursor: pointer; }
.kp-doll__slot--clickable { cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: transform var(--n-dur-fast, 120ms) var(--n-ease, ease), box-shadow var(--n-dur-fast, 120ms) var(--n-ease, ease);
}
.kp-doll__slot--clickable:hover { transform: scale(1.08); z-index: 2; }
.kp-doll__slot--clickable:active { transform: scale(.96); }
.kp-doll__slot--clickable:focus-visible { outline: 2px solid var(--n-accent, #c4694a); outline-offset: 1px; }

/* ── Item description modal (read-only) ── */
@keyframes kp-doll-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes kp-doll-sheet { from { transform: translateY(100%); } to { transform: none; } }
.kp-doll-modal {
position: fixed; inset: 0; z-index: var(--n-z-modal, 1000);
display: flex; align-items: center; justify-content: center;
}
.kp-doll-modal[hidden] { display: none; }
.kp-doll-modal__backdrop {
position: absolute; inset: 0;
background: rgba(0, 0, 0, .5);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.kp-doll-modal__sheet {
position: relative; z-index: 1;
width: min(340px, calc(100vw - 32px));
background: var(--n-bg-2, #fff);
border: 1px solid var(--n-line, rgba(0,0,0,.08));
border-radius: var(--n-r-lg, 20px);
padding: 22px;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5);
animation: kp-doll-pop .2s var(--n-ease, ease);
}
.kp-doll-modal__x {
position: absolute; top: 10px; right: 12px;
appearance: none; border: 0; background: transparent;
color: var(--n-text-dim, #999); font-size: .9rem; cursor: pointer;
line-height: 1; padding: 4px; border-radius: 8px;
}
.kp-doll-modal__x:hover { background: var(--n-bg-soft, rgba(0,0,0,.04)); color: var(--n-text, #111); }
.kp-doll-modal__name {
font-size: 1.08rem; font-weight: 800; color: var(--n-text, #111);
letter-spacing: -.01em; padding-right: 24px; line-height: 1.25;
}
.kp-doll-modal__rarity {
display: inline-block; margin-top: 9px;
font-family: var(--n-font-mono, monospace); font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
padding: 3px 9px; border-radius: var(--n-r-pill, 999px);
background: var(--n-bg-soft, rgba(0,0,0,.05)); color: var(--n-text-soft, #555);
}
.kp-doll-modal__rarity.kp-doll__slot--legendary  { background: color-mix(in srgb, var(--n-gold, #c9881e) 16%, transparent); color: var(--n-gold, #c9881e); }
.kp-doll-modal__rarity.kp-doll__slot--epic { background: color-mix(in srgb, var(--n-lav, #a855f7) 16%, transparent); color: var(--n-lav, #a855f7); }
.kp-doll-modal__rarity.kp-doll__slot--rare { background: color-mix(in srgb, var(--n-cyan, #0e9ec2) 16%, transparent); color: var(--n-cyan, #0e9ec2); }
.kp-doll-modal__lines {
list-style: none; margin: 14px 0 0; padding: 14px 0 0;
border-top: 1px solid var(--n-line-soft, var(--n-line, rgba(0,0,0,.06)));
display: flex; flex-direction: column; gap: 7px;
}
.kp-doll-modal__lines li { font-size: .86rem; color: var(--n-text-soft, #555); line-height: 1.45; }
[data-theme="dark"] .kp-doll-modal__sheet { box-shadow: 0 24px 70px -16px rgba(0, 0, 0, .75); }
@media (max-width: 480px) {
.kp-doll-modal { align-items: flex-end; }
.kp-doll-modal__sheet {
width: 100%;
border-radius: var(--n-r-lg, 20px) var(--n-r-lg, 20px) 0 0;
padding-bottom: 28px;
animation: kp-doll-sheet .22s var(--n-ease, ease);
}
}

/* v1.1.5.057: XP-бар над аватаром (match — як у профілі) */
.kp-doll__xp { width: var(--doll-avatar-w); max-width: 100%; flex-shrink: 0; }
.kp-doll__xp .w-warriors-exp-bar { width: 100%; margin: 0; }


/*
 * v1.1.6.1: стан низького здоровʼя з канонічного шаблону v5.
 *
 * До цього релізу смуга мала один колір на всі значення — гравець із 5 HP бачив те саме,
 * що з повним. Тепер нижче чверті вона червоніє: попередження приходить ДО бою, а не після.
 *
 * Пульсування навмисно НЕ додано: смуга стоїть під аватаром у списку суперників, і кілька
 * миготливих смуг поруч перетворили б екран на ялинку. Досить кольору.
 */
.kp-doll__hp-fill--low {
  background: var(--n-danger);
}

/* Доріжка HP під канонічним іменем: правила лишаються на `kp-doll__hp`, це синонім для
   збігу з макетом. Порожнє правило було б сміттям, тому тут спадкування явне. */
.kp-doll__hp-track { display: block; }