/* ============================================================
   CYBER//TYPE — Уровни-задачи (tracing, gaps, bug) и «Продолжение следует»
   Экраны #screen-challenge и #screen-continued (index.html).
   Переиспользует .game-header, .code-window, .code-text-display и
   цвета токенов из css/coding.css, кнопки .results-actions из game.css.
   ============================================================ */

.challenge-screen,
.continued-screen { padding-top: 80px; }

.challenge-screen .level-info { display: flex; align-items: center; }

/* Бейдж режима в шапке: цвет по режиму */
.challenge-mode-badge { color: #7fd7ff; }
.challenge-screen[data-mode="gaps"] .challenge-mode-badge { color: var(--warning); border-color: rgba(255, 204, 0, 0.5); background: rgba(255, 204, 0, 0.08); }
.challenge-screen[data-mode="bug"] .challenge-mode-badge  { color: var(--secondary); border-color: rgba(255, 0, 100, 0.5); background: rgba(255, 0, 100, 0.08); }

.challenge-attempts {
    min-width: 140px;
    font-size: 12px;
    color: rgba(150, 190, 255, 0.7);
    text-align: right;
}

.challenge-task {
    max-width: 900px;
    margin: 10px auto 0;
    color: rgba(219, 230, 255, 0.8);
    font-size: 14px;
    line-height: 1.5;
}

/* Код задачи читается целиком: без внутренней прокрутки редактора (до 40 строк по ТЗ) */
.challenge-screen .code-body { max-height: none; }

.challenge-code {
    font-size: 16px;
    line-height: 1.7;
    tab-size: 4;
    -moz-tab-size: 4;
    white-space: pre;
}

.challenge-label {
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--primary);
    opacity: 0.8;
}

/* ==================== ТРАССИРОВКА: поле вывода ==================== */
.challenge-answer { max-width: 900px; margin: 0 auto; }

.challenge-output {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 15px;
    line-height: 1.6;
    color: #dbe6ff;
    background: #050810;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 6px;
    resize: vertical;
}
.challenge-output:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 12px rgba(0, 255, 200, 0.2); }

/* ==================== БИТЫЙ СЕКТОР: пропуски в коде ==================== */
.gap-input {
    font: inherit;
    padding: 0 4px;
    margin: 0 1px;
    color: var(--warning);
    background: rgba(255, 204, 0, 0.08);
    border: 1px dashed rgba(255, 204, 0, 0.6);
    border-radius: 3px;
    vertical-align: baseline;
}
.gap-input:focus { outline: none; border-style: solid; box-shadow: 0 0 8px rgba(255, 204, 0, 0.35); }
.gap-input.correct { color: var(--success); border: 1px solid rgba(0, 255, 0, 0.6); background: rgba(0, 255, 0, 0.08); }
.gap-input.wrong   { color: #fff; border: 1px solid var(--secondary); background: rgba(255, 0, 100, 0.25); }

/* ==================== ГАЛЛЮЦИНАЦИЯ: строки кода Суфлёра ==================== */
.challenge-code .code-line {
    display: flex;
    cursor: pointer;
    border-radius: 3px;
}
.challenge-code .code-line:hover,
.challenge-code .code-line:focus { outline: none; background: rgba(255, 0, 100, 0.08); }
.challenge-code .line-no {
    flex: 0 0 3ch;
    margin-right: 2ch;
    text-align: right;
    color: rgba(150, 190, 255, 0.35);
    user-select: none;
}
.challenge-code .line-code { white-space: pre; }
.challenge-code .code-line.editing { background: rgba(255, 0, 100, 0.12); cursor: default; }
.challenge-code .code-line.wrong-line .line-no { color: var(--secondary); }
.challenge-code .code-line.fixed-line { background: rgba(0, 255, 0, 0.08); }

.bug-line-input {
    font: inherit;
    padding: 0 4px;
    color: #fff;
    background: #050810;
    border: 1px solid var(--secondary);
    border-radius: 3px;
}
.bug-line-input:focus { outline: none; box-shadow: 0 0 8px rgba(255, 0, 100, 0.4); }

/* Дрейф: код Суфлёра «глючит» — лёгкое мерцание и сдвиги отдельных строк */
.challenge-code.drift .code-line:nth-child(3n+1) .line-code { animation: drift-shift 7s infinite; }
.challenge-code.drift .code-line:nth-child(4n+2) .line-code { animation: drift-flicker 5s infinite; }
.challenge-code.drift .code-line.editing .line-code { animation: none; }

@keyframes drift-shift {
    0%, 92%, 100% { transform: none; text-shadow: none; }
    93%  { transform: translateX(2px); text-shadow: -2px 0 rgba(255, 0, 100, 0.6), 2px 0 rgba(0, 255, 200, 0.5); }
    95%  { transform: translateX(-1px); }
    97%  { transform: translateX(1px); text-shadow: 1px 0 rgba(0, 255, 200, 0.5); }
}
@keyframes drift-flicker {
    0%, 88%, 100% { opacity: 1; }
    89% { opacity: 0.55; }
    91% { opacity: 0.9; }
    93% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
    .challenge-code.drift .line-code { animation: none !important; }
}

/* ==================== ОБРАТНАЯ СВЯЗЬ И РАЗБОР ==================== */
.challenge-feedback {
    max-width: 900px;
    min-height: 24px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.5;
}
.challenge-feedback.success { color: var(--success); }
.challenge-feedback.fail    { color: var(--secondary); }
.challenge-feedback.warn    { color: var(--warning); }

.challenge-explanation {
    max-width: 900px;
    margin: 14px auto 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    background: var(--bg-card);
}
.challenge-explanation-text { margin: 0; color: #dbe6ff; line-height: 1.6; }

/* ==================== СУФЛЁР-ИСКУСИТЕЛЬ ==================== */
.sufler-panel {
    max-width: 900px;
    margin: 14px auto 0;
    padding: 14px 16px;
    border: 1px dashed rgba(255, 0, 100, 0.6);
    border-radius: 6px;
    background: var(--bg-card);
}
.sufler-speaker { color: var(--primary); letter-spacing: 1px; }
.sufler-vera { margin: 0 0 12px; color: #dbe6ff; }
.sufler-phrase { margin: 4px 0 8px; color: var(--secondary); }
.sufler-suggestion {
    margin: 0 0 12px;
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #dbe6ff;
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid var(--secondary);
    animation: drift-flicker 5s infinite;   /* код Суфлёра «дрейфует», как в «Галлюцинации» */
}
.level-sufler-mark { margin-left: 6px; }
.continued-sufler { margin-top: 10px; color: #dbe6ff; font-size: 14px; }
.system-restored-patched { margin: 0 0 12px; color: var(--warning); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
    .sufler-suggestion { animation: none; }
}

.challenge-actions {
    justify-content: center;
    max-width: 900px;
    margin: 20px auto 0;
}

/* ==================== «ПРОДОЛЖЕНИЕ СЛЕДУЕТ» ==================== */
.continued-screen {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.continued-signal {
    display: inline-block;
    margin-bottom: 16px;
    padding: 4px 12px;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--secondary);
    border: 1px solid rgba(255, 0, 100, 0.5);
    animation: drift-flicker 4s infinite;
}
.continued-text { color: #dbe6ff; line-height: 1.6; }
.continued-systems {
    margin: 24px auto;
    padding: 16px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
}
.continued-systems-count { margin-bottom: 10px; color: #dbe6ff; }
.continued-next { color: rgba(219, 230, 255, 0.7); font-size: 14px; }
.continued-screen .results-actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .continued-signal { animation: none; }
}

/* ==================== БЕЙДЖ РЕЖИМА НА КАРТОЧКЕ УРОВНЯ ==================== */
.level-mode-badge {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    letter-spacing: 0.5px;
    border: 1px solid currentColor;
    border-radius: 3px;
}
.level-mode-tracing { color: #7fd7ff; }
.level-mode-gaps    { color: var(--warning); }
.level-mode-bug     { color: var(--secondary); }

@media (max-width: 600px) {
    .challenge-code { font-size: 13px; }
    .challenge-attempts { display: none; }
}

/* ==================== РЕВЬЮ ==================== */
.challenge-code .code-line.review-flagged { background: rgba(255, 204, 0, 0.08); }
.challenge-code .code-line.review-flagged .line-no { color: var(--warning); }
.challenge-code .code-line.review-ok { background: rgba(0, 255, 0, 0.08); }
.challenge-code .code-line.review-wrong { background: rgba(255, 0, 100, 0.12); }
.review-reason-holder { margin-left: 12px; }
.review-reason {
    font: inherit;
    font-size: 12px;
    color: #dbe6ff;
    background: #050810;
    border: 1px solid var(--warning);
    border-radius: 3px;
}
.review-counter { margin: 4px 0 0; color: rgba(219, 230, 255, 0.7); font-size: 13px; }

/* ==================== СБОРКА ==================== */
.parsons-program, .parsons-pool { display: flex; flex-direction: column; gap: 4px; }
.parsons-pool { font-size: 15px; line-height: 1.5; }
.parsons-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    white-space: pre;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}
.parsons-line:hover, .parsons-line:focus { border-color: var(--primary); outline: none; }
.parsons-line .line-no { min-width: 2ch; color: rgba(219, 230, 255, 0.4); }
.parsons-line.parsons-wrong { border-color: var(--secondary); background: rgba(255, 0, 100, 0.12); }
.parsons-controls { margin-left: auto; display: flex; gap: 4px; }
.parsons-move {
    padding: 0 6px;
    font-size: 11px;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}
.parsons-empty { margin: 0; color: rgba(219, 230, 255, 0.5); font-size: 13px; }

/* ==================== ПОДБОР КЛЮЧА ==================== */
.keypick-expected {
    margin: 0 0 8px;
    padding: 10px 12px;
    color: var(--success);
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid var(--success);
    white-space: pre-wrap;
}
.keypick-domain { margin: 0; color: rgba(219, 230, 255, 0.7); font-size: 13px; }

/* ==================== КАРАНТИН ==================== */
.quarantine-list { display: grid; gap: 10px; }
.quarantine-card { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
.quarantine-card.quarantine-flagged { border-color: var(--warning); }
.quarantine-card.quarantine-right { border-color: var(--success); }
.quarantine-card.quarantine-wrong { border-color: var(--secondary); }
.quarantine-head { display: block; padding: 8px 12px; color: #dbe6ff; font-size: 13px; letter-spacing: 0.5px; cursor: pointer; }
.quarantine-code { margin: 0; padding: 8px 12px 12px; font-size: 14px; white-space: pre; overflow-x: auto; }

/* ==================== СТЕК ВЫЗОВОВ ==================== */
.challenge-code .code-line.stack-selected { background: rgba(255, 204, 0, 0.1); }
.stack-log {
    margin: 0 0 10px;
    padding: 10px 12px;
    color: var(--secondary);
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid var(--secondary);
    white-space: pre-wrap;
}
.stack-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stack-line-label { color: #dbe6ff; }
.stack-value { min-width: 18ch; }

/* ==================== ДУЭЛЬ ==================== */
.duel-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 900px;
    margin: 8px auto 0;
    padding: 6px 12px;
    font-size: 12px;
    border: 1px dashed rgba(255, 0, 100, 0.6);
    border-radius: 6px;
}
.duel-label { color: var(--secondary); letter-spacing: 1px; }
.duel-track { flex: 1; height: 6px; background: rgba(219, 230, 255, 0.1); border-radius: 3px; overflow: hidden; }
.duel-bar { height: 100%; width: 0; background: var(--secondary); transition: width 0.1s linear; }
.duel-status { min-width: 22ch; color: rgba(219, 230, 255, 0.8); text-align: right; }
.duel-panel.duel-ghost-done .duel-status { color: var(--secondary); }
.code-text-display .char.ghost-pos { box-shadow: inset 0 -2px 0 var(--secondary); }
.code-text-display .char.ghost-wrong { position: relative; }
.code-text-display .char.ghost-wrong::after {
    content: attr(data-ghost);
    position: absolute;
    left: 0;
    top: -1.1em;
    font-size: 0.8em;
    color: var(--secondary);
}
.level-mode-review     { color: #b98cff; }
.level-mode-parsons    { color: #7fd7ff; }
.level-mode-keypick    { color: var(--success); }
.level-mode-quarantine { color: var(--warning); }
.level-mode-stacktrace { color: var(--secondary); }
.level-mode-duel       { color: var(--secondary); }

@media (prefers-reduced-motion: reduce) {
    .duel-bar { transition: none; }
}