/* Bureau propre : interface aux couleurs du thème actif du site, aucune palette propre au jeu. */

.cd-wrapper {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-main);
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
    overflow: hidden;
}

.cd-area { padding: 24px; }

/* --- ACCUEIL ET RÉSULTAT --- */
.cd-welcome,
.cd-result {
    padding: 40px 16px;
    text-align: center;
}

.cd-welcome-icon {
    width: 80px; height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
    background: var(--primary-bg);
    border: 2px solid var(--primary-color);
}

.cd-result h3 { font-weight: 800; margin-bottom: 1rem; }
.cd-result-score { font-size: 1.25rem; font-weight: 700; }
.cd-result-objective { color: var(--text-muted); font-size: .9rem; }
.cd-result-actions { margin-top: 16px; }

/* --- BOUTONS : couleurs du btn-primary de chaque thème --- */
.cd-btn { padding: 10px 28px; font-weight: 700; }

/* --- SCÈNE --- */
.cd-intro { font-size: 1.05rem; line-height: 1.6; margin-bottom: 12px; }

.cd-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
}

.cd-counter { font-weight: 700; }

.cd-bar .cd-zoom { display: none; align-items: center; gap: 6px; }

.cd-stage {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.cd-stage svg { display: block; width: 100%; height: auto; }

/* Objets cliquables : cadres SVG ajoutés par le script, la sélection a le même aspect pour tous. */
.cd-slot { cursor: pointer; outline: none; }
.cd-ring-select,
.cd-ring-focus { visibility: hidden; pointer-events: none; fill: none; stroke: var(--primary-color); }
.cd-ring-select { stroke-width: 4px; fill: var(--primary-color); fill-opacity: .12; }
.cd-ring-focus { stroke-width: 2px; stroke-dasharray: 6 4; }
.cd-selected > .cd-ring-select,
.cd-slot:focus > .cd-ring-focus { visibility: visible; }
.cd-slot:focus:not(:focus-visible) > .cd-ring-focus { visibility: hidden; }
.cd-done .cd-slot { cursor: default; }

/* --- EXPLICATIONS --- */
.cd-explain {
    margin-top: 16px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--success-color);
    background: var(--primary-bg);
    color: var(--text-main);
}
.cd-intro:focus { outline: none; }
.cd-explain-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 12px; }
.cd-explain-list { list-style: none; padding: 0; margin: 0 0 16px; }
.cd-explain-item { padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.cd-explain-item:last-child { border-bottom: none; }
.cd-explain-fault { display: block; margin-bottom: 4px; }
.cd-explain-why { margin: 0; line-height: 1.5; }

/* --- MOBILE : zoom de l'illustration dans un cadre défilant --- */
@media (max-width: 767.98px) {
    .cd-area { padding: 12px; }
    .cd-bar .cd-zoom { display: inline-flex; }
    .cd-stage.cd-zoomed { max-height: 70vh; }
    .cd-stage.cd-zoomed svg { width: 200%; max-width: none; }
}