/**
 * regex-duel.css — Styles dédiés au jeu Regex Duel
 * Préfixe : .rd-* — ne pas mettre ici les classes .games-* (dans games.css)
 */

/* ── Carte du niveau ─────────────────────────────────────────────────────── */
.rd-level-card {
    background: var(--bg-soft, #f6f7fb);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 10px;
    padding: 1.25rem 1.25rem 1.5rem;
}

/* ── Liste des chaînes à tester ──────────────────────────────────────────── */
.rd-chain-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: 0;
    padding: 0;
}

.rd-chain-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .4rem .75rem;
    border-radius: 6px;
    border: 1px solid var(--line, #e5e7eb);
    background: var(--surface, #fff);
    transition: border-color .2s, background .2s;
}

.rd-chain-code {
    flex: 1 1 auto;
    font-size: .88rem;
    color: var(--text, #111);
    word-break: break-all;
}

.rd-chain-expect {
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rd-chain-result {
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Résultat correct */
.rd-chain-item.rd-result-ok {
    border-color: #28a745;
    background: rgba(40, 167, 69, .07);
}
.rd-chain-item.rd-result-ok .rd-chain-result {
    color: #28a745;
}

/* Résultat incorrect */
.rd-chain-item.rd-result-fail {
    border-color: #dc3545;
    background: rgba(220, 53, 69, .07);
    animation: rd-shake .35s ease;
}
.rd-chain-item.rd-result-fail .rd-chain-result {
    color: #dc3545;
}

/* Badges attendu */
.rd-expect-match    { color: #28a745; }
.rd-expect-nomatch  { color: #dc3545; }

/* Légende */
.rd-badge-must      { color: #28a745; font-weight: 700; }
.rd-badge-must-not  { color: #dc3545; font-weight: 700; }
.rd-badge-ok-ex     { color: #28a745; font-size: .78rem; font-weight: 600; }
.rd-badge-fail-ex   { color: #dc3545; font-size: .78rem; font-weight: 600; }

/* ── Zone de saisie ──────────────────────────────────────────────────────── */
.rd-input-area .form-control {
    font-family: 'Courier New', Courier, monospace;
}

/* ── Bannière succès ─────────────────────────────────────────────────────── */
.rd-success-banner {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff;
    border-radius: 8px;
    padding: .85rem 1.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    animation: rd-pulse .45s ease;
}

/* ── Bannière fin de jeu ─────────────────────────────────────────────────── */
.rd-end-banner {
    background: linear-gradient(135deg, #6f42c1 0%, #0d6efd 100%);
    color: #fff;
    border-radius: 10px;
    padding: 1.5rem;
}

/* ── Blocs de code dans l'article ────────────────────────────────────────── */
.rd-code-block {
    background: var(--bg-soft, #f6f7fb);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: .85rem;
    line-height: 1.6;
    white-space: pre;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes rd-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.03); }
}

@keyframes rd-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-5px); }
    75%       { transform: translateX(5px); }
}

/* ── Badge difficulté ────────────────────────────────────────────────────── */
.rd-level-badge { font-size: .8rem; }

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .rd-level-card,
[data-theme="dark"] .rd-chain-item {
    background: var(--surface, #1e2130);
    border-color: var(--line, #2e3350);
}

[data-theme="dark"] .rd-chain-item.rd-result-ok {
    background: rgba(40, 167, 69, .12);
}

[data-theme="dark"] .rd-chain-item.rd-result-fail {
    background: rgba(220, 53, 69, .12);
}

[data-theme="dark"] .rd-code-block {
    background: #1a1d2e;
    border-color: #2e3350;
    color: #c9d1d9;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .rd-input-area .input-group {
        max-width: 100% !important;
    }
    .rd-chain-code {
        font-size: .8rem;
    }
}