*{
box-sizing:border-box;
}
.overlay{

position:fixed;
inset:0;

background:rgba(0,0,0,.45);

display:none;

justify-content:center;
align-items:center;

z-index:999;

}

.overlay.show{

display:flex;

animation:fade .2s;

}
#close{

margin-top:25px;

padding:12px 24px;

border:none;

border-radius:999px;

background:#7c3aed;

color:white;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.2s;

}

#close:hover{

transform:scale(1.05);

}

.card{

background:white;

border-radius:24px;

padding:30px;

width:min(360px,90vw);

text-align:center;

box-shadow:0 20px 60px rgba(0,0,0,.25);

animation:pop .25s;

border:5px solid #ddd;

transition:.3s;


}

.title{

font-size:42px;

font-weight:bold;

margin-bottom:20px;

}

.answer{

font-size:56px;

font-weight:bold;

color:#7c3aed;

margin-bottom:20px;

}

.tip{

    margin-top:20px;

    padding:18px;

    border-radius:18px;

    background:#fffbe8;

    line-height:1.6;

    font-size:18px;

}

#cardProgress{

    font-size:38px;

    letter-spacing:8px;

    margin:20px 0 18px 0;

    text-align:center;

}
#cardMessage{

    font-size:20px;

    font-weight:600;

    color:#555;

    margin-bottom:24px;

    text-align:center;

}
.stars{

font-size:26px;

margin:10px 0;

}

@keyframes pop{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

body{
margin:0;
padding:0;
font-family:system-ui;
background:#f6f8fb;
}

.tables{
width:100%;
max-width:1000px;
margin:auto;
}

.table{
background:white;

padding:16px;

border-radius:20px;

overflow:hidden;
}

.grid{

display:grid;

/* FORCER 10 × 10 */
grid-template-columns:
repeat(11, minmax(0, 1fr));

gap:8px;

}

.fact,
.star{

aspect-ratio:1;

display:flex;

flex-direction:column;

    justify-content:center;

    align-items:center;

    position:relative;

border-radius:12px;

font-weight:700;

font-size:
clamp(
10px,
1.8vw,
18px
);

transition:.2s;

user-select:none;

}

.fact:hover{
transform:scale(1.04);
}

/* état initial */

.level-0{

background:#eceff3;

color:#777;

}

/* 1 réussite */
.level-1{
    background:#dbeafe;
}

/* 2 réussites */
.level-2{
    background:#93c5fd;
}

/* 3 réussites */
.level-3{
    background:#2563eb;
    color:white;
}

/* validé */
.validated{
    background:linear-gradient(
        135deg,
        #fde68a,
        #f59e0b
    );

    color:#6b4300;

    animation:goldPulse 2s infinite;
}

.badge{
    position:absolute;

    top:6px;
    right:8px;

    font-size:22px;
}

@keyframes goldPulse{
    0%{
        box-shadow:0 0 0 rgba(255,200,0,0);
    }

    50%{
        box-shadow:
        0 0 18px rgba(255,190,0,.7);
    }

    100%{
        box-shadow:0 0 0 rgba(255,200,0,0);
    }
}
.all-complete h2{

color:white;

font-size:34px;

text-align:center;

text-shadow:
0 2px 8px rgba(0,0,0,.35);

}

.star{

aspect-ratio:1;

width:100%;

display:flex;
justify-content:center;
align-items:center;

font-weight:bold;
font-size:clamp(10px,1.5vw,18px);
color:white;

clip-path:polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);

background:#bdbdbd;

transition:.4s;

}

/* 0 validation */
.progress0{
background:#bdbdbd;
}
 
/* 1  */
.progress1
{
background:#dbeafe;
}

/* 2 */
.progress2{
background:#93c5fd;
}

/* 3*/
.progress3{
background:#2563eb;
    color:white;
}

/* 4 */
.progress4{

background:gold;

color:#6b5200;

box-shadow:0 0 15px gold;

animation:shine 2s infinite;

}

@keyframes shine{

50%{

transform:scale(1.08);

box-shadow:
0 0 25px gold;

}

}
/* table entière */
.table.completed{

    border:5px solid gold;

    background:
    linear-gradient(
      180deg,
      #fffdf1,
      white
    );
}

.table.completed h3::after{
    content:" 🎉";
}


.all-complete{

animation:victory 2s infinite;
padding:10px;
border-radius:16px;
background:
linear-gradient(
90deg,
#7c3aed,
#ec4899
);

}

@keyframes victory{

50%{
transform:scale(1.01);
}

}

.table-row-complete{

border:3px solid gold;

box-shadow:
0 0 12px rgba(255,215,0,.5);

}


@keyframes rainbow{

    50%{
        transform:scale(1.03);
    }

}

*{
box-sizing:border-box;
}

body{

margin:0;

font-family:
system-ui;

background:
#f6f8fb;

}



.petitesstars{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1px;

    margin-bottom:10px;

    line-height:1;

    font-size:12px;

}
.operation{

    font-size:20px;

    font-weight:bold;

    line-height:1;

}


/* téléphone */


@media (max-width:800px){

.grid{
gap:4px;
}

.fact{

font-size:11px;

border-radius:8px;

}

.petitesstars
{
font-size:7px;
}
.operation{

    font-size:14px;
}
}



.locked-message {
    margin: 0 20px 20px;
    padding: 15px;
    border-radius: 10px;
    background: #fff3cd;
    color: #856404;
    text-align: center;
}

.locked-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
}

.locked-message p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.4;
}

.buy-pack-btn {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 8px;
    background: #e5a900;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    transition: background 0.2s ease, transform 0.2s ease;
}

.buy-pack-btn:hover {
    background: #c88f00;
    transform: translateY(-2px);
}

/* =========================================
   NAVIGATION
========================================= */

.bottom-navigation {
    display: flex;

    justify-content: center;

    margin: 35px 0 20px;
}

.back-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 180px;
    min-height: 48px;

    padding: 0 25px;

    border-radius: 10px;

    background: #0c1d33;

    border: 1px solid #367da9;

    color: #bfe8ff;

    text-decoration: none;

    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.back-button:hover {
    background: #12365a;
    transform: translateY(-2px);
}


/* =========================================
   FOOTER
========================================= */

footer {
    text-align: center;

    color: #607b96;

    font-size: 12px;

    padding-top: 10px;
}