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

/* ==========================================================================
 *  KURNÍK PROFI — STYLY APLIKACE, ROZŠÍŘENÍ v2
 *
 *  Gamifikace, komunita, dvorek, sdílení. Navazuje na kp-app.css a čte
 *  výhradně tokeny z kp-brand.css — ani jedna pevná barva, stín nebo doba
 *  trvání animace, aby šel vzhled doladit až přijdou finální rendery.
 * ========================================================================== */

/* -------- Vzácnost (karty, kosmetika, achievementy) --------------------- */

.kpa-rarity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kpa-rarity--common { background: var(--kp-cream-3); color: var(--kp-ink-soft); }
.kpa-rarity--uncommon { background: var(--kp-green-soft); color: var(--kp-green-deep); }
.kpa-rarity--rare { background: var(--kp-sky-soft); color: color-mix(in oklab, var(--kp-sky) 75%, var(--kp-ink)); }
.kpa-rarity--epic { background: color-mix(in oklab, var(--kp-terracotta) 16%, var(--kp-surface)); color: var(--kp-terracotta-deep); }
.kpa-rarity--legendary { background: linear-gradient(100deg, var(--kp-gold-soft), var(--kp-gold-glow)); color: #3A2A08; }

/* -------- Peněženka ----------------------------------------------------- */

.kpa-wallet {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-2xl);
    background: linear-gradient(150deg, var(--kp-gold-soft), var(--kp-surface) 74%);
    border: 1px solid color-mix(in oklab, var(--kp-gold) 34%, transparent);
}

.kpa-wallet__amount {
    font-family: var(--kp-font-playful);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}

.kpa-wallet__meta { font-size: 12px; color: var(--kp-ink-faint); }

/* -------- Obecný ukazatel postupu -------------------------------------- */

.kpa-bar {
    height: 9px;
    border-radius: 999px;
    background: var(--kp-cream-3);
    overflow: hidden;
}

.kpa-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--kp-green), var(--kp-green-2));
}

.kpa-bar__fill--gold { background: linear-gradient(90deg, var(--kp-gold), var(--kp-gold-2)); }

/* -------- Mřížky --------------------------------------------------------- */

.kpa-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.kpa-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--s-3); }

/* -------- Položka obchodu ------------------------------------------------ */

.kpa-shop-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--s-3);
    border-radius: var(--r-lg);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-shadow-sm);
}

.kpa-shop-item--owned { border-color: color-mix(in oklab, var(--kp-green) 42%, transparent); }

.kpa-shop-item--equipped { background: linear-gradient(160deg, var(--kp-green-soft), var(--kp-surface) 76%); }

.kpa-shop-item__icon { font-size: 30px; line-height: 1.1; text-align: center; }

.kpa-shop-item__name { font-weight: 650; font-size: 13px; }

.kpa-shop-item__price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--kp-font-playful);
    font-weight: 600;
    font-size: 13.5px;
}

/* -------- Sběratelská karta slepičky ------------------------------------ */

.kpa-collect {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: var(--r-xl);
    padding: var(--s-3);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-shadow-sm);
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.kpa-collect--legendary {
    background: linear-gradient(160deg, var(--kp-gold-soft), var(--kp-surface) 70%);
    border-color: color-mix(in oklab, var(--kp-gold) 50%, transparent);
}

.kpa-collect--locked { opacity: 0.72; border-style: dashed; }

.kpa-collect__no {
    position: absolute;
    top: 8px;
    inset-inline-start: 10px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--kp-ink-faint);
}

.kpa-collect__name {
    font-family: var(--kp-font-playful);
    font-size: 16px;
    font-weight: 600;
    margin-top: 2px;
}

/* -------- Komunitní příspěvek ------------------------------------------- */

.kpa-post {
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--kp-shadow-sm);
}

.kpa-post__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); }

.kpa-post__author { font-weight: 650; font-size: 13.5px; }

.kpa-post__meta { font-size: 11.5px; color: var(--kp-ink-faint); }

.kpa-post__body { padding: 0 var(--s-3) var(--s-3); font-size: 13.5px; line-height: 1.55; }

.kpa-post__photo {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: var(--s-8) var(--s-3);
    background: linear-gradient(150deg, var(--kp-green-soft), var(--kp-gold-soft));
    font-size: 46px;
}

.kpa-post__caption { font-size: 11.5px; color: var(--kp-ink-soft); }

.kpa-post__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    border-top: 1px solid var(--kp-line);
}

.kpa-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--kp-line-strong);
    background: transparent;
    color: var(--kp-ink-soft);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

.kpa-like--on {
    background: var(--kp-green-soft);
    border-color: color-mix(in oklab, var(--kp-green) 44%, transparent);
    color: var(--kp-green-deep);
}

.kpa-comment { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--kp-line-soft); font-size: 12.5px; }

.kpa-comment__author { font-weight: 700; }

/* -------- Dvorek --------------------------------------------------------- */

.kpa-yard {
    position: relative;
    min-height: 250px;
    border-radius: var(--r-2xl);
    padding: var(--s-4);
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--kp-sky) 26%, var(--kp-surface)) 0%,
        var(--kp-green-soft) 58%,
        var(--kp-cream-3) 100%);
    border: 1px solid var(--kp-line);
    overflow: hidden;
}

.kpa-yard__sky { display: flex; justify-content: space-between; font-size: 26px; }

.kpa-yard__stage { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-top: var(--s-6); }

.kpa-yard__deco { font-size: 34px; line-height: 1; }

.kpa-yard__hens { display: flex; flex-wrap: wrap; gap: 2px; margin-top: var(--s-3); }

.kpa-yard__empty { text-align: center; padding: var(--s-6) 0; color: var(--kp-ink-soft); font-size: 13px; }

/* -------- Sdílená karta (náhled) ---------------------------------------- */

.kpa-share {
    border-radius: var(--r-2xl);
    padding: var(--s-5);
    background: linear-gradient(160deg, var(--kp-green-soft), var(--kp-gold-soft));
    border: 1px solid var(--kp-line);
    text-align: center;
}

.kpa-share__inner {
    background: var(--kp-surface);
    border-radius: var(--r-xl);
    padding: var(--s-4);
    box-shadow: var(--kp-shadow-sm);
}

.kpa-share__icon { font-size: 40px; line-height: 1.1; }

.kpa-share__title {
    font-family: var(--kp-font-playful);
    font-size: 23px;
    font-weight: 600;
    margin: 6px 0 0;
}

.kpa-share__brand {
    margin-top: var(--s-3);
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--kp-ink-faint);
}

/* -------- Wrapped -------------------------------------------------------- */

.kpa-wrapped {
    border-radius: var(--r-2xl);
    padding: var(--s-5);
    text-align: center;
    background: linear-gradient(165deg, #241C43, #4A3A78);
    color: #F1E7D6;
    border: 1px solid transparent;
}

.kpa-wrapped__value {
    font-family: var(--kp-font-playful);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
}

.kpa-wrapped__label { font-size: 12.5px; opacity: 0.78; margin-top: 4px; }

.kpa-wrapped__note { font-size: 12px; opacity: 0.62; margin-top: 6px; }

/* -------- Mood ring ------------------------------------------------------ */

.kpa-moodring {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-2xl);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-shadow-sm);
}

.kpa-moodring__ring {
    flex: none;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--kpa-mood-color) calc(var(--kpa-mood-pct, 0) * 1%), var(--kp-cream-3) 0);
}

.kpa-moodring__core {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: var(--kp-surface);
    display: grid;
    place-items: center;
    font-family: var(--kp-font-playful);
    font-size: 19px;
    font-weight: 600;
}

.kpa-moodring--joy { --kpa-mood-color: var(--kp-gold); }
.kpa-moodring--calm { --kpa-mood-color: var(--kp-green); }
.kpa-moodring--sleepy { --kpa-mood-color: var(--kp-sky); }
.kpa-moodring--attention { --kpa-mood-color: var(--kp-terracotta); }

/* -------- Vztahy --------------------------------------------------------- */

.kpa-rel {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-lg);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
}

.kpa-rel__kind { flex: none; font-size: 22px; }

/* -------- Žebříček ------------------------------------------------------- */

.kpa-rank {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-lg);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
}

.kpa-rank--me {
    background: var(--kp-green-soft);
    border-color: color-mix(in oklab, var(--kp-green) 42%, transparent);
}

.kpa-rank__no {
    flex: none;
    width: 30px;
    text-align: center;
    font-family: var(--kp-font-playful);
    font-weight: 600;
    font-size: 16px;
}

.kpa-rank__score { font-family: var(--kp-font-playful); font-weight: 600; font-size: 16px; }

/* -------- Drawer navigace ------------------------------------------------ */

.kpa-drawer-nav { display: grid; gap: 2px; }

.kpa-drawer-nav__group {
    margin-top: var(--s-4);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kp-ink-faint);
}

.kpa-drawer-nav__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 10px var(--s-3);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--kp-ink);
    font-size: 13.5px;
    font-weight: 600;
}

.kpa-drawer-nav__item:hover { background: var(--kp-green-soft); color: var(--kp-green-deep); }