/**
 * css-selector-quest.css — Styles dédiés au jeu CSS Selector Quest
 * Communs .games-* dans games.css — ici: styles propres au jeu uniquement
 */

/* ── DOM Tree Display ──────────────────────────────────────────────────────── */
.csq-dom-tree {
    background: #0d1117;
    color: #e6edf3;
    border-radius: 10px;
    padding: 1.1rem 1.4rem;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 2;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #30363d;
    max-height: 300px;
    white-space: pre;
    margin: 0;
    user-select: all;
}

.csq-line { display: block; }

.csq-target-line {
    background: rgba(249, 115, 22, 0.14);
    border-left: 3px solid #f97316;
    padding-left: 8px;
    margin-left: -8px;
    border-radius: 0 4px 4px 0;
}

/* Syntax highlighting */
.csq-tag      { color: #79c0ff; }
.csq-attr-name { color: #d2a8ff; }
.csq-attr-val  { color: #a5d6ff; }
.csq-text      { color: #7ee787; }

.csq-badge {
    display: inline-block;
    background: #f97316;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    margin-left: 10px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    font-family: system-ui, sans-serif;
    animation: csq-blink 1.4s ease infinite;
}

@keyframes csq-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* ── Input zone ────────────────────────────────────────────────────────────── */
.csq-prompt {
    background: #1a1f2e !important;
    color: #f97316 !important;
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    font-weight: 700;
    border-color: #30363d !important;
    min-width: 2.8rem;
    justify-content: center;
}

.csq-input {
    background: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 1rem !important;
    caret-color: #f97316;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.csq-input::placeholder { color: #4b5563 !important; }

.csq-input:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18) !important;
    outline: none;
}

.csq-input.is-valid  { border-color: #22c55e !important; background-image: none !important; }
.csq-input.is-invalid { border-color: #ef4444 !important; background-image: none !important; }

@keyframes csq-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-7px); }
    40%       { transform: translateX(7px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}
.csq-shake { animation: csq-shake 0.38s ease; }

/* ── Objective ─────────────────────────────────────────────────────────────── */
.csq-objective {
    background: linear-gradient(135deg, rgba(249,115,22,.09), rgba(249,115,22,.03));
    border: 1px solid rgba(249,115,22,.28);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 0.93rem;
}

/* ── Hint ──────────────────────────────────────────────────────────────────── */
.csq-hint {
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.22);
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    font-size: 0.83rem;
    color: #93c5fd;
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* ── Feedback inline — surcharge position: fixed du système af-alert ──────── */
#gm-feedback.af-alert {
    position: static;
    z-index: auto;
    box-shadow: none;
    font-size: 0.88rem;
}
#gm-feedback code { font-family: 'Fira Code', monospace; font-size: 0.82em; }

/* ── Start screen ──────────────────────────────────────────────────────────── */
.csq-start-icon { font-size: 3.2rem; line-height: 1; }

.csq-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(249,115,22,.1);
    border: 1px solid rgba(249,115,22,.22);
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    font-size: 0.83rem;
    font-weight: 600;
}

/* ── End screen ────────────────────────────────────────────────────────────── */
.csq-end-score {
    font-size: 4.5rem;
    font-weight: 800;
    color: #f97316;
    line-height: 1;
    font-family: 'Manrope', system-ui, sans-serif;
}
.csq-end-score small {
    font-size: 1.1rem;
    color: #9ca3af;
    font-weight: 400;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] .csq-objective { background: rgba(249,115,22,.13); }
[data-theme="dark"] .csq-hint { color: #bfdbfe; }
[data-theme="dark"] .csq-info-pill { background: rgba(249,115,22,.15); }