:root{
    --fond:#0f172a;
    --panneau:#111827;
    --bord:#1f2937;
    --texte:#e5e7eb;
    --accent:#3b82f6;
    --ok:#10b981;          /* vert: bonne couleur + bonne position */
    --warn:#eab308;        /* jaune: bonne couleur, mauvaise position */
    --ko:#ef4444;

    /* 12 couleurs contrastées */
    --c-rouge:#ef4444;     /* rouge vif */
    --c-vert:#16a34a;      /* vert vif */
    --c-bleu:#2563eb;      /* bleu vif */
    --c-jaune:#f59e0b;     /* jaune soutenu */
    --c-violet:#8b5cf6;    /* violet vif */
    --c-orange:#f97316;    /* orange vif */
    --c-rose:#ec4899;      /* rose fuchsia */
    --c-cyan:#06b6d4;      /* cyan */
    --c-lime:#84cc16;      /* vert lime */
    --c-turquoise:#14b8a6; /* turquoise/teal */
    --c-marron:#92400e;    /* marron chaud */
    --c-blanc:#f8fafc;     /* blanc */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
    color:var(--texte);
    background:radial-gradient(1000px 600px at 20% 0%,#1f2937 0%, var(--fond) 50%);
}

.conteneur{
    max-width:900px;
    margin:24px auto;
    padding:16px;
    display:grid;
    gap:16px;
    grid-template-columns: 1fr 360px;
}

.entete{
    grid-column:1 / -1;
    display:flex;align-items:center;justify-content:space-between;
}
h1{margin:0;font-weight:800;letter-spacing:.5px}

.panneau-jeu{
    background:var(--panneau);
    border:1px solid var(--bord);
    border-radius:16px;
    padding:16px;
}

.grille{
    display:grid;
    grid-template-rows: repeat(10, 1fr);
    gap:10px;
}
.ligne{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
}
.case{
    border:2px dashed #334155;
    border-radius:12px;
    height:48px;
    display:grid;
    place-items:center;
    background:#0b1220;
    transition: border-color .15s ease, border-style .15s ease, box-shadow .15s ease;
}
.case.active{ border-style: solid; border-color: var(--accent) }

/* Indices par bordures (après validation) */
.case.indice-bonne-place{
    border-style: solid;
    border-color: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent);
}
.case.indice-bonne-couleur{
    border-style: solid;
    border-color: var(--warn);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 30%, transparent);
}

.pion{
    width:28px;height:28px;border-radius:50%;
    border:2px solid #0006; box-shadow: inset 0 2px 4px #0006;
}
.pion.rond{ width:34px; height:34px; }

.pion.rouge{background:var(--c-rouge)}
.pion.vert{background:var(--c-vert)}
.pion.bleu{background:var(--c-bleu)}
.pion.jaune{background:var(--c-jaune)}
.pion.violet{background:var(--c-violet)}
.pion.orange{background:var(--c-orange)}
.pion.rose{background:var(--c-rose)}
.pion.cyan{background:var(--c-cyan)}
.pion.lime{background:var(--c-lime)}
.pion.turquoise{background:var(--c-turquoise)}
.pion.marron{background:var(--c-marron)}
.pion.blanc{background:var(--c-blanc); border-color:#0005}

/* Panneau actions */
.panneau-actions{
    background:var(--panneau);
    border:1px solid var(--bord);
    border-radius:16px;
    padding:16px;
    display:flex;flex-direction:column;gap:16px;
}

/* Palette: 12 couleurs -> 6 colonnes pour deux lignes confortables */
.palette{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:10px;
}
.palette .pion{ cursor:pointer; transition: transform .1s ease; opacity:1 }
.palette .pion:active{ transform: scale(.95) }
.palette .pion:disabled{ opacity:.35; cursor:not-allowed; filter:grayscale(.2) }

/* Légende */
.legende{
    display:flex; gap:18px; flex-wrap:wrap; align-items:center;
    font-size:.95rem; opacity:.95;
}
.legende-item{ display:flex; align-items:center; gap:8px }
.carre{
    width:18px; height:18px; border-radius:6px;
    border:2px dashed #334155; background:#0b1220;
}
/* réutilise les mêmes classes que pour les cases */
.carre.indice-bonne-place{ border-style:solid; border-color:var(--ok); box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent) }
.carre.indice-bonne-couleur{ border-style:solid; border-color:var(--warn); box-shadow:0 0 0 2px color-mix(in srgb, var(--warn) 30%, transparent) }

.boutons{ display:flex; gap:10px; flex-wrap:wrap }
.btn{
    background:#0b1220; color:var(--texte);
    border:1px solid #1f2937; padding:10px 14px;
    border-radius:10px; cursor:pointer;
}
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn-principal{ background:var(--accent); border-color:transparent; color:white; font-weight:600 }

.message{ min-height:1.5em; margin:0 }
.message.succes{ color:var(--ok) }
.message.erreur{ color:var(--ko) }

.pied{ grid-column:1 / -1; opacity:.75 }

.etat-compte{
    font-size:.9rem;
    text-align:right;
    opacity:.9;
}
.etat-compte.ok{ color:var(--ok); }
.etat-compte.erreur{ color:var(--ko); }

.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;
}