/* ═══════════════ Взлом ПК — терминальная тема ═══════════════ */

canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    background-color: #000;
    margin-bottom: var(--spacing-md);
}

#battle-container {
    width: 100%;
    max-width: 1370px;
    aspect-ratio: 4 / 1.5;
    margin: 0 auto;
    position: relative;
    margin-bottom: var(--spacing-md);
}

/* SOUND toggle — справа вверху */
#toggle-sound {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: #0b1a0f;
    color: #39ff88;
    border: 2px solid #1f6b3a;
    border-radius: var(--border_radius_small);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-pixel);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background var(--transition-speed) var(--transition-func),
        transform var(--transition-speed) var(--transition-func),
        box-shadow var(--transition-speed) var(--transition-func);
    transform: translate(0px, calc(-1 * var(--spacing-xl)));
}

#toggle-sound:hover {
    background: #123018;
    box-shadow: 0 0 12px rgba(57, 255, 136, 0.55);
}

/* ─── Терминал ввода ──────────────────────────────────────────────────────── */
#typing-bar {
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    pointer-events: auto;
    display: none;
}

#terminal-window {
    min-width: 60%;
    max-width: 92%;
    background: #050b06;
    border: 1px solid #1f6b3a;
    border-radius: var(--border_radius_small);
    box-shadow: 0 0 18px rgba(57, 255, 136, 0.25), inset 0 0 24px rgba(0, 40, 15, 0.6);
    overflow: hidden;
    font-family: 'Courier New', 'Consolas', monospace;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#terminal-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #0c1710;
    padding: 5px 10px;
    border-bottom: 1px solid #1f6b3a;
}

.term-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.85;
}

.term-dot-red { background: #ff5f56; }
.term-dot-yellow { background: #ffbd2e; }
.term-dot-green { background: #27c93f; }

#terminal-path {
    margin-left: 10px;
    color: #4fae72;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#typing-text {
    position: relative;
    height: 2.4em;
    overflow: hidden;
    padding: 10px 16px;
}

#typing-inner {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    will-change: transform;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: clamp(16px, 2.2vw, 22px);
}

.char {
    display: inline-block;
    padding: 0 1px;
    color: #1f6b3a; /* непройденный код — тусклый зелёный */
}

.char.correct {
    color: #39ff88; /* пройденный — яркий зелёный */
    text-shadow: 0 0 6px rgba(57, 255, 136, 0.65);
}

.char.space {
    display: inline-block;
    width: 10px;
    background-color: rgba(57, 255, 136, 0.05);
}

.char.current {
    color: #041a0a;
    background: #39ff88;
    box-shadow: 0 0 10px rgba(57, 255, 136, 0.85);
    animation: cursor-blink 1s step-start infinite;
}

@keyframes cursor-blink {
    50% { background: transparent; color: #39ff88; box-shadow: none; }
}

/* моментальная ошибка — красный глитч */
#terminal-window.error {
    animation: term-shake 0.25s;
    border-color: #ff3b3b;
    box-shadow: 0 0 22px rgba(255, 59, 59, 0.6), inset 0 0 24px rgba(60, 0, 0, 0.5);
}

#terminal-window.error #typing-inner .char:not(.correct):not(.current) {
    color: #ff5252;
}

@keyframes term-shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

.container {
    position: relative;
}

h1 {
    font-family: var(--font-title);
    font-size: var(--font-size-uxl);
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    text-align: center;
}

.game-description {
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    color: var(--color-black);
    opacity: 0.8;
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.back-button {
    font-size: var(--font-size-sm);
    font-weight: bold;
    text-decoration: none;
    color: var(--color-black);
    white-space: nowrap;
    opacity: 0.8;
}

.back-button:hover {
    text-decoration: underline;
}

.back-icon {
    margin-bottom: var(--spacing-md);
}