:root{
    --bg:#0f172a;
    --card:#111827;
    --card-front:#0b1220;
    --accent:#38bdf8;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --ok:#10b981;
    --warn:#f59e0b;
    --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}

html,body{
    margin:0;
    height:100%;
    background: radial-gradient(1200px 800px at 10% -10%, #1e293b 0, var(--bg) 40%, #050814 100%);
    color:var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.container{
    max-width: 980px;
    margin: 24px auto;
    padding: 0 16px 40px;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom: 12px;
}
h1{font-size: clamp(1.3rem, 2.5vw, 2rem); margin:0}

.stats{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.stat{
    background:rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    padding:8px 12px; border-radius:12px;
    font-variant-numeric: tabular-nums;
}

.controls{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin: 12px 0 18px;
}
label{color:var(--muted)}
select{
    background: var(--card);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 8px 10px;
    outline: none;
}
.btn{
    background: transparent;
    border:1px solid var(--accent);
    color: var(--text);
    padding:8px 12px;
    border-radius: 12px;
    cursor:pointer;
    transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ background: rgba(56,189,248,0.12); box-shadow: 0 0 0 3px rgba(56,189,248,0.15) inset}
.btn:active{ transform: translateY(1px) }
.btn-primary{ background: var(--accent); color:#06222b; border-color: transparent; }
.btn-primary:hover{ filter: brightness(1.05) }

.board{
    display:grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    align-items: stretch;
    perspective: 1000px;
}

.card{
    position:relative;
    width:100%;
    aspect-ratio: 3 / 4;
    border-radius:16px;
    transform-style: preserve-3d;
    transition: transform .5s ease;
    box-shadow: var(--shadow);
    cursor:pointer;
    outline: none;
}
.card[data-state="matched"]{
    animation: pop .25s ease;
    cursor: default;
    filter: saturate(115%);
}
@keyframes pop{
    0%{ transform: scale(1) rotate(0) }
    50%{ transform: scale(1.05) rotate(1deg) }
    100%{ transform: scale(1) rotate(0) }
}

.card-inner{
    position:absolute; inset:0;
    transform-style: preserve-3d;
    border-radius: inherit;
}

.face{
    position:absolute; inset:0;
    display:grid; place-items:center;
    font-size: clamp(2rem, 6vw, 3rem);
    border-radius: inherit;
    backface-visibility: hidden;
}

.face.back{
    background: linear-gradient(180deg, var(--card) 0%, var(--card-front) 100%);
    border:1px solid rgba(255,255,255,0.08);
}
.face.front{
    transform: rotateY(180deg);
    background: radial-gradient(500px 300px at 50% 0%, rgba(255,255,255,0.05), transparent 60%), linear-gradient(180deg, #0f1a2f, #0a0f1d);
    border:1px solid rgba(56,189,248,0.35);
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.card[data-flipped="true"] .card-inner{
    transform: rotateY(180deg);
    transition: transform .5s ease;
}

.card:focus-visible{
    box-shadow: 0 0 0 3px rgba(56,189,248,0.4);
}

@media (max-width:520px){
    .board{ gap:10px }
}
.dialog{
    border:none;
    border-radius: 16px;
    background: #0b1220;
    color: var(--text);
    padding: 20px;
    box-shadow: var(--shadow);
}
.dialog::backdrop{
    background: rgba(0,0,0,0.55);
}
.dialog-actions{
    display:flex; gap:10px; justify-content:flex-end; margin-top:12px;
}

/* État du compte (connecté / non connecté) */
.etat-compte{
    font-size: .9rem;
    color: var(--muted);
    margin: 4px 0 16px;
}
.etat-compte.ok{
    color: var(--ok);
}
.etat-compte.erreur{
    color: var(--warn);
}

/* Lien retour à l'accueil */
.retour-accueil{
    margin:.25rem 0 0;
    font-size:.9rem;
}
.retour-accueil a{
    color:var(--accent);
    text-decoration:none;
}
.retour-accueil a:hover{
    text-decoration:underline;
}

/* Texte dans la modale pour l'état d'enregistrement */
.etat-enregistrement{
    font-size:.9rem;
    margin-top:4px;
}
.etat-enregistrement.ok{
    color:var(--ok);
}
.etat-enregistrement.erreur{
    color:var(--warn);
}