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

/* ==========================================================================
 *  KURNÍK PROFI — GAMIFIKACE v2
 *
 *  Rámečky avataru v tierech, cesta hodností, Coop Pass, questy a mini-hra.
 *  Vizuální popisy tierů: docs/product/gamification-system.md §4.2
 *
 *  Animace (zlatý shimmer, diamantové jiskření) jsou čistě CSS a MUSÍ se
 *  vypnout při omezeném pohybu — viz blok na konci souboru.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 *  Rámeček avataru
 * -------------------------------------------------------------------------- */

.kpa-frame {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    padding: 7px;
    flex: none;
    isolation: isolate;
}

.kpa-frame__inner {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--kp-surface);
    font-size: 46px;
    line-height: 1;
    overflow: hidden;
}

/* Menší varianta do seznamů — bez animací, jen materiál (výkon má přednost). */
.kpa-frame--sm { width: 52px; height: 52px; padding: 3px; }
.kpa-frame--sm .kpa-frame__inner { font-size: 22px; }
.kpa-frame--sm::before, .kpa-frame--sm::after { display: none; }
.kpa-frame--sm .kpa-frame__spark { display: none; }

/* 🪵 Dřevo — olejovaný dub, letokruhy, matný voskový lesk. */
.kpa-frame--wood {
    background:
        repeating-conic-gradient(from 0deg, #8B5E34 0deg 6deg, #A8763F 6deg 12deg),
        #97673A;
    box-shadow: inset 0 0 0 2px rgba(60, 40, 20, 0.30), var(--kp-shadow-sm);
}

/* 🥉 Bronz — kladívkovaný kov s patinou v prohlubních. */
.kpa-frame--bronze {
    background:
        radial-gradient(circle at 30% 25%, #D89A5C 0%, transparent 45%),
        conic-gradient(from 210deg, #8C5A2B, #C98545, #7A4A22, #C98545, #8C5A2B);
    box-shadow: inset 0 0 0 2px rgba(70, 45, 20, 0.35), var(--kp-shadow-sm);
}

/* 🥈 Stříbro — soustředné kartáčování, čisté a chladnější. */
.kpa-frame--silver {
    background:
        repeating-conic-gradient(from 0deg, #C9CDD2 0deg 3deg, #E8ECEF 3deg 6deg),
        #D3D8DC;
    box-shadow: inset 0 0 0 2px rgba(90, 100, 110, 0.30), var(--kp-shadow-sm);
}

/* 🥇 Zlato — leštěné zlato s reliéfem klasů + putující odlesk. */
.kpa-frame--gold {
    background: conic-gradient(from 200deg, #B8862B, #F3D27A, #D9A441, #FBEBB8, #C9922F, #B8862B);
    box-shadow: inset 0 0 0 2px rgba(120, 85, 20, 0.32), 0 0 18px rgba(217, 164, 65, 0.30);
}

/* Odlesk projde prstencem jednou za ~4 s — jako když se po kovu mihne slunce. */
.kpa-frame--gold::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.75) 48%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 64%);
    animation: kpa-shimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes kpa-shimmer {
    0%, 12% { transform: translateX(-115%); opacity: 0; }
    22% { opacity: 1; }
    55% { opacity: 1; }
    70%, 100% { transform: translateX(115%); opacity: 0; }
}

/* 💎 Diamant — platina osazená brilianty, kameny jiskří nepravidelně. */
.kpa-frame--diamond {
    background: conic-gradient(from 140deg, #DDE6EE, #FFFFFF, #C6D4E2, #FFFFFF, #D3DEE9, #DDE6EE);
    box-shadow: inset 0 0 0 2px rgba(120, 145, 170, 0.35), 0 0 22px rgba(190, 220, 255, 0.45);
}

.kpa-frame__spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: radial-gradient(circle, #FFFFFF 0%, rgba(200, 235, 255, 0.9) 45%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    animation: kpa-sparkle 1.4s ease-in-out infinite;
}

@keyframes kpa-sparkle {
    0%, 70%, 100% { opacity: 0; transform: scale(0.4); }
    12% { opacity: 1; transform: scale(1.25); }
    28% { opacity: 0.35; transform: scale(0.8); }
}

/* 🏅 Founder — zlato s terakotovou intarzií, pomalejší a teplejší shimmer. */
.kpa-frame--founder {
    background: repeating-conic-gradient(from 0deg,
        #D9A441 0deg 22deg, #C1502E 22deg 32deg, #F3D27A 32deg 44deg);
    box-shadow: inset 0 0 0 2px rgba(120, 60, 30, 0.35), 0 0 18px rgba(193, 80, 46, 0.28);
}

.kpa-frame--founder::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 200, 0.6) 50%, transparent 62%);
    animation: kpa-shimmer 6.5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* 🍂 Sezónní — stříbrný základ obrostlý sezónním motivem. */
.kpa-frame--seasonal {
    background:
        radial-gradient(circle at 50% 8%, var(--kp-gold) 0 8%, transparent 9%),
        radial-gradient(circle at 88% 45%, var(--kp-green-2) 0 7%, transparent 8%),
        radial-gradient(circle at 12% 45%, var(--kp-green-2) 0 7%, transparent 8%),
        radial-gradient(circle at 50% 92%, var(--kp-gold-2) 0 8%, transparent 9%),
        repeating-conic-gradient(from 0deg, #C9CDD2 0deg 3deg, #E8ECEF 3deg 6deg);
    box-shadow: inset 0 0 0 2px rgba(90, 100, 110, 0.30), var(--kp-shadow-sm);
}

/* Odznak tieru pod rámečkem. */
.kpa-frame-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--kp-cream-3);
    color: var(--kp-ink-soft);
}

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

.kpa-frame-card--locked { opacity: 0.6; border-style: dashed; }

.kpa-frame-card--active { border-color: var(--kp-green); background: var(--kp-green-soft); }

/* --------------------------------------------------------------------------
 *  Cesta hodností
 * -------------------------------------------------------------------------- */

.kpa-track { display: grid; gap: 0; }

.kpa-track__row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    position: relative;
}

.kpa-track__row + .kpa-track__row { border-top: 1px solid var(--kp-line-soft); }

.kpa-track__badge {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 19px;
    background: var(--kp-cream-3);
    color: var(--kp-ink-faint);
    flex: none;
}

.kpa-track__row--done .kpa-track__badge {
    background: linear-gradient(160deg, var(--kp-green-2), var(--kp-green));
    color: #FFFFFF;
}

.kpa-track__row--current .kpa-track__badge {
    background: linear-gradient(160deg, var(--kp-gold-2), var(--kp-gold));
    color: #3A2A08;
    box-shadow: 0 0 0 4px var(--kp-gold-soft);
}

.kpa-track__title { font-weight: 700; font-size: 14px; }

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

.kpa-track__unlock { font-size: 12.5px; color: var(--kp-ink-soft); margin-top: 3px; }

.kpa-track__row--locked .kpa-track__title,
.kpa-track__row--locked .kpa-track__unlock { opacity: 0.62; }

/* Zvýrazněná karta „další odemknutí" — vždy viditelná odměna dopředu. */
.kpa-next {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-2xl);
    background: linear-gradient(150deg, var(--kp-gold-soft), var(--kp-surface) 76%);
    border: 1px solid color-mix(in oklab, var(--kp-gold) 38%, transparent);
}

.kpa-next__icon { font-size: 30px; flex: none; }

/* --------------------------------------------------------------------------
 *  Coop Pass
 * -------------------------------------------------------------------------- */

.kpa-pass { display: grid; gap: var(--s-2); }

.kpa-pass__row {
    display: grid;
    grid-template-columns: 42px 1fr 1fr;
    gap: var(--s-2);
    align-items: center;
    padding: var(--s-2);
    border-radius: var(--r-lg);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
}

.kpa-pass__row--reached { border-color: color-mix(in oklab, var(--kp-green) 40%, transparent); }

.kpa-pass__level {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--kp-cream-3);
    font-family: var(--kp-font-playful);
    font-weight: 600;
    font-size: 14px;
}

.kpa-pass__row--reached .kpa-pass__level {
    background: linear-gradient(160deg, var(--kp-green-2), var(--kp-green));
    color: #FFFFFF;
}

.kpa-pass__cell {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px var(--s-2);
    border-radius: var(--r-md);
    font-size: 12px;
    min-width: 0;
}

.kpa-pass__cell--free { background: var(--kp-green-soft); }

.kpa-pass__cell--premium { background: var(--kp-gold-soft); }

.kpa-pass__cell--dim { opacity: 0.45; }

.kpa-pass__cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kpa-pass__head {
    display: grid;
    grid-template-columns: 42px 1fr 1fr;
    gap: var(--s-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kp-ink-faint);
    padding: 0 var(--s-2);
}

/* --------------------------------------------------------------------------
 *  Hry — hub
 *  Karty her. Chystaná hra je vidět, ale je vizuálně ztlumená — nemá lákat
 *  na klik, jen ukázat směr.
 * -------------------------------------------------------------------------- */

.kpa-arcade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-4);
}

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

.kpa-arcade__card--soon {
    background: color-mix(in oklab, var(--kp-surface) 82%, var(--kp-cream));
    border-style: dashed;
    box-shadow: none;
}

.kpa-arcade__card--soon .kpa-arcade__icon,
.kpa-arcade__card--soon .kpa-card__title {
    opacity: 0.72;
}

.kpa-arcade__icon {
    flex: 0 0 auto;
    font-size: 34px;
    line-height: 1;
}

.kpa-arcade__body {
    min-width: 0;
    flex: 1;
}

.kpa-arcade__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-3);
}

.kpa-arcade__stat {
    font-family: var(--kp-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--kp-ink);
}

/* --------------------------------------------------------------------------
 *  Slepičí nálet
 *  Plátno drží poměr stran a nikdy nepřeroste výšku okna — na mobilu se hraje
 *  na výšku, na desktopu ve sloupci. `touch-action: none` je nutnost: bez něj
 *  by tažení prstem scrollovalo stránku místo slepice.
 * -------------------------------------------------------------------------- */

/* Svět je 360 jednotek široký; na širokém monitoru by se roztáhl do krajiny
   a svislý scroller by ztratil smysl. Sloupec proto zůstává na výšku. */
.kpa-raid {
    position: relative;
    max-width: 520px;
    margin-inline: auto;
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: var(--kp-shadow-sm);
}

.kpa-raid__canvas {
    display: block;
    width: 100%;
    height: min(74vh, 660px);
    touch-action: none;
    background: var(--kp-cream-3);
}

.kpa-raid__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--s-4);
    background: color-mix(in oklab, var(--kp-ink) 44%, transparent);
    backdrop-filter: blur(3px);
}

.kpa-raid__panel {
    max-width: 44ch;
    padding: var(--s-5);
    border-radius: var(--r-2xl);
    background: var(--kp-surface);
    box-shadow: var(--kp-shadow);
    text-align: center;
}

.kpa-raid__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-3);
    font-size: 12px;
    color: var(--kp-ink-soft);
}

.kpa-raid__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-3);
    text-align: center;
}

.kpa-raid__stats span { display: block; }

.kpa-raid__stats strong {
    font-family: var(--kp-font-display);
    font-size: 17px;
}

@media (max-width: 480px) {
    .kpa-raid__canvas { height: min(62vh, 520px); }
    .kpa-raid__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Rozostření překryvu je dekorace — v plochém režimu odpadá. */
:root[data-effects="minimal"] .kpa-raid__overlay,
:root[data-effects="balanced"] .kpa-raid__overlay {
    backdrop-filter: none;
}

/* --------------------------------------------------------------------------
 *  Mini-hra „Chyť vajíčko"
 * -------------------------------------------------------------------------- */

.kpa-game {
    position: relative;
    height: 380px;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--kp-sky) 28%, var(--kp-surface)) 0%,
        var(--kp-green-soft) 72%,
        var(--kp-cream-3) 100%);
    border: 1px solid var(--kp-line);
    touch-action: manipulation;
    user-select: none;
}

.kpa-game__egg {
    position: absolute;
    width: 46px;
    height: 46px;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.kpa-game__egg:disabled { cursor: default; }

.kpa-game__hud {
    position: absolute;
    inset-inline: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: var(--s-3);
    font-family: var(--kp-font-playful);
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
}

.kpa-game__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--s-5);
    background: var(--surface-glass-strong);
    backdrop-filter: blur(3px);
}

/* --------------------------------------------------------------------------
 *  „Egg crack" konfeta při odměně
 * -------------------------------------------------------------------------- */

.kpa-crack {
    position: fixed;
    inset-inline: 0;
    top: 22%;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 60;
}

.kpa-crack__egg {
    font-size: 54px;
    animation: kpa-crack-pop 900ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@keyframes kpa-crack-pop {
    0% { transform: scale(0.5) rotate(-8deg); opacity: 0; }
    35% { transform: scale(1.25) rotate(4deg); opacity: 1; }
    60% { transform: scale(1) rotate(-2deg); }
    100% { transform: scale(1.05) translateY(-14px); opacity: 0; }
}

.kpa-crack__bit {
    position: absolute;
    font-size: 17px;
    opacity: 0;
    animation: kpa-crack-fly 900ms ease-out forwards;
}

@keyframes kpa-crack-fly {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--kpa-dx, 0), var(--kpa-dy, -50px)) scale(1.1); }
}

/* --------------------------------------------------------------------------
 *  Stupně achievementů
 * -------------------------------------------------------------------------- */

.kpa-tier {
    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-tier--bronze { background: linear-gradient(100deg, #E8C9A0, #C98545); color: #4A2C10; }
.kpa-tier--silver { background: linear-gradient(100deg, #EDF1F4, #C2C8CE); color: #3B4248; }
.kpa-tier--gold { background: linear-gradient(100deg, var(--kp-gold-soft), var(--kp-gold-2)); color: #3A2A08; }

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

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

/* --------------------------------------------------------------------------
 *  Respekt k omezenému pohybu — povinná brána
 * -------------------------------------------------------------------------- */

:root[data-motion="reduced"] .kpa-frame--gold::before,
:root[data-motion="reduced"] .kpa-frame--founder::before,
:root[data-motion="reduced"] .kpa-frame__spark,
:root[data-motion="reduced"] .kpa-crack__egg,
:root[data-motion="reduced"] .kpa-crack__bit {
    animation: none !important;
}

:root[data-motion="reduced"] .kpa-frame__spark { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kpa-frame--gold::before,
    :root:not([data-motion="full"]) .kpa-frame--founder::before,
    :root:not([data-motion="full"]) .kpa-frame__spark,
    :root:not([data-motion="full"]) .kpa-crack__egg,
    :root:not([data-motion="full"]) .kpa-crack__bit {
        animation: none !important;
    }

    :root:not([data-motion="full"]) .kpa-frame__spark { opacity: 0.85; }
}