/* ==========================================================================
   INSIGNE.CSS — caseta MatePro, insignele si stilurile de recompense

   De ce e fisier separat: regulile astea erau in global.css, dar pagina de
   start (index.html) NU incarca global.css — are stilurile ei, iar global.css
   stilizeaza si body, h1, h2, deci n-ar putea fi incarcat acolo fara sa
   schimbe toata pagina. Ca sa nu ajungem cu doua copii care se despart in
   timp, insignele stau aici si se incarca de peste tot, inclusiv din index.html.

   Se incarca DUPA global.css in paginile care il au.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CASETA MatePro — inlocuieste ferestrele alert() din paginile de test

   De ce exista: alert() deseneaza o fereastra a browserului, cu „matepro10.ro
   says" scris deasupra. Arata a eroare tehnica, nu a vorba de profesor, si nu
   se poate schimba nici textul din buton, nici culorile. Copilul primeste
   acelasi tipar vizual pe care il vede cand ii cade internetul.

   Caseta de mai jos arata ca platforma si lasa loc pentru doua butoane, ca
   elevul sa poata fi dus inapoi la exercitiile ramase goale, nu doar anuntat.

   z-index 300: peste fereastra de cont din index.html, care sta pe 200.
   -------------------------------------------------------------------------- */

.mp-caseta {
    position: fixed;
    inset: 0;
    height: 100%;
    height: 100dvh;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mpCasetaFundal 0.18s ease-out;
}

.mp-caseta-cutie {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 26px 24px;
    width: 380px;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
    animation: mpCasetaIntra 0.22s ease-out;
}

.mp-caseta-semn {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 12px;
}

.mp-caseta-titlu {
    font-size: 1.3rem;
    font-weight: 700;
    color: #14503c;
    margin: 0 0 10px;
}

.mp-caseta-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 22px;
}

/* Butoanele: principalul plin, secundarul discret sub el. Pe telefon stau
   unul sub altul oricum, pentru ca sunt pe latime intreaga. */
.mp-caseta-butoane {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mp-caseta-buton {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    background: #14503c;
    color: #ffffff;
    transition: background 0.15s ease;
}

.mp-caseta-buton:hover  { background: #1a6b4f; }
.mp-caseta-buton:active { background: #0f3d2d; }

.mp-caseta-buton-sters {
    background: transparent;
    color: #ea580c;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 10px;
}

.mp-caseta-buton-sters:hover  { background: #f6faf8; }
.mp-caseta-buton-sters:active { background: #dcefe6; }

/* Exercitiul la care a fost dus elevul. Se aprinde scurt, apoi se stinge —
   destul cat sa-l gaseasca ochiul, nu cat sa-l sperie. */
.mp-atentie {
    animation: mpAtentie 1.5s ease-out;
}

@keyframes mpCasetaFundal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mpCasetaIntra {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes mpAtentie {
    0%   { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0.60); }
    60%  { box-shadow: 0 0 0 9px rgba(249, 115, 22, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0);    }
}

/* Copiii care au cerut din sistem mai putina miscare nu primesc animatii. */
@media (prefers-reduced-motion: reduce) {
    .mp-caseta,
    .mp-caseta-cutie,
    .mp-atentie {
        animation: none;
    }
}

/* ==========================================================================
   INSIGNA DE PUNCTE
   Cercul care se deschide la culoare pe masura ce copilul aduna puncte.
   Culoarea NU e scrisa aici — se calculeaza in matepro-helpers.js si se pune
   pe element, ca sa existe un singur loc in care se hotaraste scara.
   ========================================================================== */

.mp-insigna-zona { margin: 4px 0 2px; }

.mp-insigna {
    width: 132px;
    margin: 0 auto 12px;
    line-height: 0;                 /* fara spatiu fantoma sub svg */
}

.mp-insigna svg {
    display: block;
    /* Umbra se pune pe desen, nu pe o cutie patrata: asa urmareste valurile
       stampilei si funda, nu un dreptunghi in jurul lor. */
    filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.22));
}

.mp-insigna-sub {
    margin: 0 0 10px;
    font-size: 0.86rem;
    color: #64748b;
    line-height: 1.45;
}

.mp-insigna-bara {
    height: 8px;
    border-radius: 99px;
    background: #e2e8f0;
    overflow: hidden;
    margin: 0 auto 4px;
    max-width: 240px;
}

.mp-insigna-bara-umplut {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}

/* Scara intreaga — se arata doar vizitatorilor fara cont, ca sa vada
   drumul pe care abia au pasit. */
.mp-scara {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    max-width: 260px;
    margin: 2px auto 12px;
}

.mp-scara-punct {
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.42;
}

.mp-scara-punct.atins { opacity: 1; }

/* Insignele „perfect" — stampile mici, cate una pe subiect */
.mp-perfect-rand {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 2px 0 12px;
    flex-wrap: wrap;
}
/* Latimea o da stampila, nu textul de sub ea. Fara asta, o eticheta mai lunga
   („inca niciuna") intindea insigna si a patra sarea pe randul urmator. */
.mp-perfect { text-align: center; width: 86px; }
.mp-perfect-desen { width: 78px; margin: 0 auto; line-height: 0; }
.mp-perfect-desen svg {
    display: block;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.2));
}
.mp-perfect-sub {
    margin: 5px 0 0;
    overflow-wrap: break-word;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Prezenta pe luni */
.mp-prezenta { text-align: center; margin: 4px 0 10px; }
.mp-prezenta .mp-perfect-desen { width: 84px; margin: 0 auto; }
.mp-luni {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px; margin-top: 9px;
}
.mp-luna-chip {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1.5px solid #cbd5e1; border-radius: 99px;
    padding: 3px 10px; font-size: 0.74rem; font-weight: 700; color: #475569;
}
.mp-luna-punct { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* Indemnul de sus, la Subiectul III si la testul complet: trece rezultatele
   pe masura ce lucrezi, nu toate la final. Nu e o regula, e o rugaminte —
   de aceea are tonul si culoarea unei note, nu ale unei atentionari. */
.mp-indemn {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 760px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    background: #f6faf8;
    border-left: 3px solid #1a6b4f;
    border-radius: 0 10px 10px 0;
    color: #3f5c51;
    font-size: 0.92rem;
    line-height: 1.55;
}
.mp-indemn span { flex-shrink: 0; }

/* Insigna fixa din coltul din dreapta sus.

   E BUTON, nu chenar: se apasa si se deschide vitrina cu toate insignele.
   Avea pointer-events:none, ca sa nu fure clicuri de la ce e dedesubt — dar
   acum tocmai clicul e rostul ei, iar latimea e cat stampila, deci nu incurca.
   Fara asta, insignele „perfect" se vedeau o singura data, in caseta de la
   finalul testului, si copilul n-avea de unde sa stie ca exista. */
.mp-insigna-fixa {
    position: fixed;
    /* Sub bara de sus, nu peste ea: barele paginilor au vreo 63-66px si sunt
       lipite (sticky), asa ca o insigna la 14px ar sta peste numele copilului. */
    top: 76px;
    right: 14px;
    z-index: 150;
    width: 74px;
    text-align: center;
    user-select: none;

    /* dezbracarea butonului de infatisarea lui din browser */
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: transform .12s ease;
}
.mp-insigna-fixa:hover  { transform: scale(1.06); }
.mp-insigna-fixa:active { transform: scale(0.98); }
.mp-insigna-fixa:focus-visible {
    outline: 2px solid #ea580c;
    outline-offset: 4px;
    border-radius: 12px;
}
.mp-insigna-fixa .mp-insigna { width: 74px; margin: 0 auto; }
/* Cifra din stampila nu spune singura ce e. Un cuvant sub ea, si se intelege. */
.mp-insigna-fixa-eticheta {
    margin-top: 1px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}
.mp-insigna-fixa-cod {
    margin-top: 2px;
    font-family: 'Consolas', 'SF Mono', 'Menlo', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #64748b;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}
/* Pe telefon e mai mica, altfel acopera butoanele din bara de sus */
@media (max-width: 640px) {
    .mp-insigna-fixa { width: 52px; top: 72px; right: 8px; }
    .mp-insigna-fixa .mp-insigna { width: 52px; }
    .mp-insigna-fixa-cod { font-size: 0.58rem; }
    .mp-insigna-fixa-eticheta { font-size: 0.55rem; }
}

/* In vitrina sunt mereu patru insigne, si trebuie sa incapa pe un rand — trei
   plus una singura dedesubt arata a greseala. Randul cel mai ingust masurat e
   328px (in paginile de test; pe prima pagina caseta iese mai lata). La 72 cu
   spatiu de 10 ies 4x72 + 3x10 = 318, deci incap. Pe telefon se aseaza doua
   cate doua, ceea ce e in regula. Masurat in browser, nu socotit din ochi. */
.mp-perfect-rand.vitrina { gap: 10px; }
.mp-perfect-rand.vitrina .mp-perfect { width: 72px; }
.mp-perfect-rand.vitrina .mp-perfect-desen { width: 64px; }
.mp-perfect-rand.vitrina .mp-perfect-sub { font-size: 0.66rem; letter-spacing: 0.03em; }

/* Insigna necastigata inca: se vede, dar palid. Un copil nu poate tinti ceva
   despre care nu stie. De-aia nu dispare, ci se stinge. */
.mp-perfect.stins { opacity: 0.4; filter: grayscale(0.85); }
.mp-perfect.stins .mp-perfect-sub {
    font-style: italic;
    /* „ÎNCĂ NICIUNA" cu majuscule si spatiere nu incape pe un rand sub o
       stampila de 72px si o rupea in doua. Cu litere mici incape. */
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.7rem;
}