/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.                   */
/* Proprietary and confidential. See LICENSE in the project root.             */

/* ==========================================================================
 *  Avatar slepičky — kroužek, kresba, doplňky
 *
 *  KOTEVNÍ BODY jsou tady, na jednom místě. Každý slot má střed (x, y),
 *  šířku a náklon v poměru k velikosti avataru; komponenta jen vypíše
 *  `<img>` se třídou slotu. Kdyby se postava překreslila a oči se posunuly,
 *  mění se jedno číslo v tomhle souboru, ne kotva na každé stránce.
 *
 *  Hodnoty jsou naměřené na výřezech hlavy z `tools/images/build-avatars.py`:
 *  výřez je odvozený od hřebínku, takže oči i temeno padnou u všech nálad
 *  i postav na totéž místo.
 * ========================================================================== */

.kp-avatar {
    --kp-avatar-size: 3rem;

    /* Kresba je větší než kroužek a je posunutá nahoru — hřebínek tak
       vykoukne nad prstenec. Nic se neořezává: výřez hlavy má průhledné
       okolí, takže přesah je vidět celý. */
    --art-scale: 1.34;
    --art-shift: -18%;

    /* --- kotvy doplňků (podíl velikosti avataru) --- */
    --anchor-eyes-x: 50%;
    --anchor-eyes-y: 47%;
    --anchor-eyes-w: 0.70;

    --anchor-head-x: 50%;
    --anchor-head-y: 12%;
    --anchor-head-w: 0.80;

    --anchor-neck-x: 50%;
    --anchor-neck-y: 88%;
    --anchor-neck-w: 0.72;

    --anchor-badge-x: 78%;
    --anchor-badge-y: 82%;
    --anchor-badge-w: 0.42;

    position: relative;
    display: inline-block;
    width: var(--kp-avatar-size);
    height: var(--kp-avatar-size);
    flex: none;
    vertical-align: middle;

    /* Přesah hřebínku a doplňků ven z kroužku — proto se neořezává. */
    overflow: visible;
    isolation: isolate;
}

/* Prstenec a podklad. Krémové kolečko je tam kvůli kontrastu: bílá slepička
   na světlé fotce by se ztratila. */
.kp-avatar__ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background:
        radial-gradient(120% 120% at 30% 18%,
            #FFFFFF 0%, #FBF0DC 45%, #EACB8E 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 0 0 2px rgba(240, 190, 90, 0.65),
        0 4px 12px rgba(6, 12, 8, 0.35);
}

.kp-avatar--bare .kp-avatar__ring { display: none; }

.kp-avatar__art {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

/* Kresba se kotví ke STŘEDU kroužku, ne k jeho levé hraně: jinak by se
   zvětšením vysunula doprava a u pravého okraje panelu by z něj vylezla. */
.kp-avatar__art img {
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(100% * var(--art-scale));
    height: auto;
    display: block;
    transform: translate(-50%, var(--art-shift));
    /* Stín drží kresbu nad prstencem, ať nesplyne s podkladem. */
    filter: drop-shadow(0 2px 3px rgba(20, 14, 6, 0.28));
}

/* Volná dekorace: bez kroužku se kresba nezvětšuje ani neposouvá. */
.kp-avatar--bare { --art-scale: 1; --art-shift: 0%; }

/* --- doplňky ------------------------------------------------------------ */

.kp-avatar__item {
    position: absolute;
    z-index: 2;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(20, 14, 6, 0.3));
}

.kp-avatar__item--eyes {
    left: var(--anchor-eyes-x);
    top: var(--anchor-eyes-y);
    width: calc(var(--kp-avatar-size) * var(--anchor-eyes-w));
    transform: translate(-50%, -50%);
}

.kp-avatar__item--head {
    left: var(--anchor-head-x);
    top: var(--anchor-head-y);
    width: calc(var(--kp-avatar-size) * var(--anchor-head-w));
    transform: translate(-50%, -50%);
    z-index: 3;
}

.kp-avatar__item--neck {
    left: var(--anchor-neck-x);
    top: var(--anchor-neck-y);
    width: calc(var(--kp-avatar-size) * var(--anchor-neck-w));
    transform: translate(-50%, -50%);
}

.kp-avatar__item--badge {
    left: var(--anchor-badge-x);
    top: var(--anchor-badge-y);
    width: calc(var(--kp-avatar-size) * var(--anchor-badge-w));
    transform: translate(-50%, -50%);
    z-index: 4;
}

/* ==========================================================================
 *  Zkoušecí kabinka — základ obchodu s kosmetikou
 * ========================================================================== */

.kp-wardrobe {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
}

.kp-wardrobe__stage {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    padding: clamp(1rem, 2vh, 1.75rem);
    border-radius: var(--r-xl, 22px);
    background: var(--kp-cream-2, #F6EFE2);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}

.kp-wardrobe__name { font-weight: 600; font-size: 1rem; }
.kp-wardrobe__hint { font-size: 0.8rem; color: var(--fg-3, #6b6b6b); text-align: center; }

.kp-wardrobe__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.75rem;
}

.kp-wardrobe__item {
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: 0.3rem;
    padding: 0.75rem 0.5rem 0.6rem;
    border-radius: var(--r-lg, 16px);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    background: var(--surface-s1, #FFFFFF);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s var(--ease-out, ease),
                box-shadow 0.2s ease;
}

.kp-wardrobe__item:hover {
    transform: translateY(-2px);
    border-color: var(--kp-a-2, #4CAF50);
    box-shadow: 0 6px 18px rgba(20, 40, 20, 0.1);
}

.kp-wardrobe__item.is-on {
    border-color: var(--kp-a, #3C9636);
    box-shadow: inset 0 0 0 1px var(--kp-a, #3C9636);
}

.kp-wardrobe__item img { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.kp-wardrobe__item-name { font-size: 0.78rem; font-weight: 500; line-height: 1.25; }

.kp-wardrobe__price {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--kp-a-deep, #2F7412);
}

@media (max-width: 720px) {
    .kp-wardrobe { grid-template-columns: minmax(0, 1fr); }
}

/* Doplňky ani kresba se nikde nehýbou samy od sebe; jediný pohyb je
   nadzvednutí dlaždice při najetí, které `prefers-reduced-motion` ruší. */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kp-wardrobe__item { transition: none; }
    :root:not([data-motion="full"]) .kp-wardrobe__item:hover { transform: none; }
}

:root[data-motion="reduced"] .kp-wardrobe__item { transition: none; }
:root[data-motion="reduced"] .kp-wardrobe__item:hover { transform: none; }

/* Agáta v panelu asistentky sedí u pravého horního rohu; hřebínek jí smí
   přesahovat nad hlavičku panelu, proto tu není žádný ořez. */
.kp-ai__agata { margin-block: -0.2rem; }