* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Comic Sans MS", "Segoe UI", Verdana, sans-serif;
    /* Odtiene sú z tej istej palety ako farby odznakov (.farba-*), len tmavšie stopy.
       Pôvodný fialovo-ružový gradient s nimi nedržal - ružová v paletke odznakov nie je. */
    background: linear-gradient(140deg, #4c1d95 0%, #1d4ed8 52%, #0e7490 100%);
    background-attachment: fixed;
    color: #2b1d4a;
}

.obal {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.hlavicka {
    text-align: center;
    color: #fff;
    margin-bottom: 1.5rem;
}

.hlavicka h1 {
    font-size: 2rem;
    margin: 0.25rem 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.vyhladavanie {
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

.vyhladavanie input[type=text] {
    flex: 1;
    min-width: 200px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: 2px solid #c7d2e8;
    font-size: 1.1rem;
}

.vyhladavanie button {
    padding: 0.7rem 1.6rem;
    border: none;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: bold;
    font-size: 1.05rem;
    cursor: pointer;
}

.vyhladavanie button:hover { filter: brightness(1.08); }

/* Kompaktná verzia - diskrétne v rohu, len keď už vitrína zobrazuje výsledky. */
.vyhladavanie-mala {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.35rem;
    border-radius: 999px;
    gap: 0.35rem;
    margin-bottom: 0;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.vyhladavanie-mala:hover,
.vyhladavanie-mala:focus-within { opacity: 1; }

.vyhladavanie-mala input[type=text] {
    min-width: 90px;
    width: 110px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.vyhladavanie-mala button {
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .vyhladavanie-mala { top: 0.5rem; right: 0.5rem; }
    .vyhladavanie-mala input[type=text] { width: 80px; min-width: 80px; }
}

.karta-info {
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.streak-pas {
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 1.5rem;
}

.streak-plamen { font-size: 2.5rem; }
.streak-cislo { font-size: 1.8rem; font-weight: bold; }
.streak-popis { color: #6a5b8c; }

.mriezka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.odznak-karta {
    background: #fff;
    border-radius: 18px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.15s ease;
}

.odznak-karta.ziskany:hover { transform: translateY(-4px); }

.odznak-karta.zamknuty { opacity: 0.75; }
.odznak-karta.zamknuty .odznak-ikona { filter: grayscale(1); opacity: 0.55; }

.odznak-ikona {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 0.5rem;
    display: block;
}

.odznak-nazov {
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.odznak-popis {
    font-size: 0.78rem;
    color: #6a5b8c;
    margin-bottom: 0.4rem;
    line-height: 1.25;
}

.odznak-datum {
    font-size: 0.75rem;
    color: #9a8bc0;
}

.progres-obal {
    background: #e4e9f5;
    border-radius: 999px;
    height: 10px;
    margin: 0.5rem 0 0.25rem;
    overflow: hidden;
}

.progres-vypln {
    height: 100%;
    /* Vo farbe skupiny, ak ju rodičovská karta nastavila (--farba); inak neutrálna modrá. */
    background: var(--farba, #3b82f6);
    border-radius: 999px;
}

.progres-text {
    font-size: 0.78rem;
    color: #7a6a9c;
}

/* Manuálny odznak nie je "zamknutý" - dieťa naň nemusí nič odomknúť, stačí prísť
   za knihovníčkou. Preto vlastný, prívetivejší štýl namiesto sivého "Zamknuté". */
.odznak-manual {
    font-size: 0.72rem;
    color: #6f5b9e;
    background: #f0e8ff;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    display: inline-block;
}

@media (max-width: 480px) {
    .hlavicka h1 { font-size: 1.5rem; }
    .mriezka { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* =====================================================================================
   Vitrína "Moje Badgy" - sekcie, farby odznakov, pás Takmer hotové
   ===================================================================================== */

.vrch {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    color: #fff;
    margin-bottom: 1.25rem;
}

.vrch h1 {
    font-size: 1.6rem;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.sekcia {
    margin-bottom: 2rem;
}

.sekcia h2 {
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
}

/* -------------------------------------------------------------------------------------
   Farby podľa skupiny odznakov (farbaSkupiny() v OdznakModel.php).
   Ikony zatiaľ nemáme, takže farba je jediné, čo odznaky navzájom odlišuje.
   ------------------------------------------------------------------------------------- */
.farba-modra   { --farba: #3b82f6; --farba-svetla: #dbeafe; }
.farba-zelena  { --farba: #22a06b; --farba-svetla: #d7f5e6; }
.farba-cervena { --farba: #e5484d; --farba-svetla: #ffe0e1; }
.farba-zlta    { --farba: #f5a524; --farba-svetla: #ffefd5; }
.farba-fialova { --farba: #8b5cf6; --farba-svetla: #ede4ff; }
.farba-tyrkys  { --farba: #06b6d4; --farba-svetla: #d5f4fa; }

/* -------------------------------------------------------------------------------------
   Takmer hotové - vodorovný pás kariet
   Na mobile sa posúva prstom, preto scroll-snap; na širokej obrazovke sa jednoducho
   vojde a scrollbar sa nezobrazí.
   ------------------------------------------------------------------------------------- */
.pas {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.pas::-webkit-scrollbar { height: 6px; }
.pas::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); border-radius: 999px; }

.karta-blizko {
    flex: 0 0 15rem;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 18px;
    border-top: 5px solid var(--farba, #8b5cf6);
    padding: 0.9rem 1rem 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.karta-hlavicka {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.karta-nazov {
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.2;
}

.karta-cisla {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: bold;
    color: #4a3a76;
}

.karta-vyzva {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    font-weight: bold;
    color: var(--farba, #6a2fb5);
}

.karta-popis {
    font-size: 0.8rem;
    color: #6a5b8c;
    line-height: 1.3;
}

/* Kruhová ikona v karte a v širokých kartách (sezónne výzvy, meta-odznaky). */
.odznak-ikona-mala {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 1.25rem;
    border-radius: 50%;
    background: var(--farba-svetla, #ede4ff);
    border: 2px solid var(--farba, #8b5cf6);
}

.odznak-ikona-mala img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* -------------------------------------------------------------------------------------
   Karty odznakov v mriežke
   ------------------------------------------------------------------------------------- */
.odznak-karta { position: relative; }

/* Rámik má len naposledy získaný odznak - keby ho mali všetky, prestal by
   niesť informáciu. Ostatné získané odlišuje od zamknutých biele pozadie a ikona. */
.odznak-karta.najnovsi {
    border: 3px solid var(--farba, #f5a524);
}

.stuha {
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    background: #ffd166;
    color: #5a3d00;
    font-size: 0.68rem;
    font-weight: bold;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    white-space: nowrap;
}

/* Kruhová ikona v mriežke - farebná pri získaných, sivá s otáznikom pri chýbajúcich. */
.odznak-karta .odznak-ikona {
    width: 60px;
    height: 60px;
    line-height: 56px;
    font-size: 1.7rem;
    text-align: center;
    border-radius: 50%;
    background: var(--farba-svetla, #ede4ff);
    border: 3px solid var(--farba, #8b5cf6);
}

.odznak-ikona img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

.odznak-ikona-otaznik {
    background: #eceaf3;
    border-color: #c9c4d8;
    color: #9a93ad;
    font-weight: bold;
}

.odznak-karta.zamknuty { opacity: 1; background: #fbfaff; }
.odznak-karta.zamknuty .odznak-nazov { color: #6a5b8c; }

.hviezdy {
    color: #f5a524;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------------------
   Široké karty - sezónne výzvy a meta-odznaky
   ------------------------------------------------------------------------------------- */
.karta-siroka {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: #fff;
    border-radius: 18px;
    border-left: 5px solid var(--farba, #8b5cf6);
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.karta-telo { flex: 1; min-width: 0; }

@media (max-width: 480px) {
    .vrch { flex-direction: column; }
    .vrch h1 { font-size: 1.35rem; }
    .karta-blizko { flex-basis: 13rem; }
}

/* -------------------------------------------------------------------------------------
   Akordeón "Ešte mi chýbajú" - jedna skupina odznakov na riadok
   <details>/<summary> je natívne: zbalí sa samo, funguje bez JS a čítačky obrazovky
   ho ohlásia ako rozbaľovací prvok.
   ------------------------------------------------------------------------------------- */
.akordeon {
    background: rgba(255,255,255,0.95);
    border-radius: 14px;
    border-left: 5px solid var(--farba, #3b82f6);
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.akordeon summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    list-style: none;
}

/* Vlastná šípka namiesto systémového trojuholníka, nech vyzerá rovnako všade. */
.akordeon summary::-webkit-details-marker { display: none; }

.akordeon summary::before {
    content: "▸";
    color: var(--farba, #3b82f6);
    font-size: 1.1rem;
    transition: transform 0.15s ease;
}

.akordeon[open] summary::before { transform: rotate(90deg); }

.akordeon summary:hover { background: rgba(0,0,0,0.03); }

.akordeon-nazov { flex: 1; }

.akordeon-pocet {
    background: var(--farba, #3b82f6);
    color: #fff;
    font-size: 0.8rem;
    min-width: 1.6rem;
    text-align: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.akordeon .mriezka {
    padding: 0 1rem 1rem;
}

/* Pixel-art avatar (AvatarModel::vykresliAvatarSvg) - v hlavičke vitríny aj v budúcich
   rebríčkoch. Biele pozadie + rám, lebo samotné <svg> kreslí len farebné políčka a inak
   by na tmavom gradientnom pozadí stránky nebolo vidno okraje avatara bez farby. */
.avatar-svg {
    display: block;
    background: #fff;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.avatar-prazdny { opacity: 0.85; }

/* Biela "karta" - zdieľaný stavebný blok mimo samotnej vitríny (napr. avatar.php,
   verejný dashboard index.php). */
.karta {
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 1.5rem;
}
.karta h2 { margin-top: 0; font-size: 1.15rem; }
.karta p.info { color: #555; font-size: 0.95rem; }