@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;700;900&display=swap');

:root {
    --blue:     #5582FF;
    --blue-dim: #2a4acc;
    --green:    #00e676;
    --red:      #ff4455;
    --yellow:   #ffcc00;
    --bg:       #080808;
    --s1:       #0f0f0f;
    --s2:       #141414;
    --b1:       #1e1e1e;
    --b2:       #2a2a2a;
    --text:     #ffffff;
    --dim:      #444;
    --mid:      #777;
    --mono:     'JetBrains Mono','Courier New',monospace;
    --sans:     'Inter',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden}

/* CRT */
.crt-overlay{position:fixed;inset:0;pointer-events:none;z-index:200;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px)}
.crt-scanline{position:fixed;left:0;width:100%;height:80px;pointer-events:none;z-index:201;background:linear-gradient(to bottom,transparent,rgba(85,130,255,.03),transparent);animation:scan 9s linear infinite}
@keyframes scan{from{top:-80px}to{top:100vh}}

/* Welcome */
#welcome-screen{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s}
body.started #welcome-screen{opacity:0;pointer-events:none}
.welcome-logo{margin-bottom:40px}.welcome-logo img{height:36px}
.welcome-card{width:460px;border:1px solid var(--b2);background:var(--s1);padding:28px 32px 32px}
.wc-header{display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--b1);font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:1.5px}
.wc-header .live{color:var(--blue)}
.boot-log{font-family:var(--mono);font-size:12px;color:var(--mid);line-height:1.9;min-height:95px;margin-bottom:24px}
.boot-log .line{display:block}.boot-log .line.blue{color:var(--blue)}
.boot-log .cursor{display:inline-block;width:8px;height:13px;background:var(--blue);vertical-align:middle;animation:blink 1s step-end infinite;margin-left:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.start-btn{width:100%;padding:14px;background:var(--blue);color:#fff;border:none;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .15s}
.start-btn:hover{background:#6b93ff}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:48px;border-bottom:1px solid var(--b1);background:var(--s1);flex-shrink:0}
.header-logo img{height:22px}
.header-meta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:1px}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 6px var(--blue);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.back-btn{padding:6px 14px;background:transparent;border:1px solid var(--b2);color:var(--mid);font-family:var(--mono);font-size:10px;cursor:pointer;letter-spacing:1px;transition:border-color .15s,color .15s}
.back-btn:hover{border-color:var(--blue);color:var(--blue)}

/* Screens */
#case-select,#app{display:flex;flex-direction:column;height:100vh;opacity:0;pointer-events:none;transition:opacity .35s;position:fixed;inset:0}
body.started #case-select{opacity:1;pointer-events:auto}
body.in-case #case-select{opacity:0;pointer-events:none}
body.in-case #app{opacity:1;pointer-events:auto}

/* ── CASE GRID ── */
.case-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b1);overflow-y:auto;padding:0}
.case-card{background:var(--bg);padding:28px;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;gap:10px}
.case-card:hover{background:var(--s1)}
.case-card.case-solved{background:rgba(85,130,255,.03)}
.case-card-top{display:flex;align-items:center;justify-content:space-between}
.case-num{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:1px}
.case-diff{font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:3px 8px;border:1px solid}
.diff-easy{color:var(--green);border-color:var(--green)}
.diff-med{color:var(--yellow);border-color:var(--yellow)}
.case-card-title{font-size:18px;font-weight:700;line-height:1.2}
.case-card-desc{font-size:13px;color:var(--mid);line-height:1.6;flex:1}
.case-card-status{font-family:var(--mono);font-size:11px;letter-spacing:1px;margin-top:4px}
.status-solved{color:var(--blue)}.status-open{color:var(--dim)}
.case-card:hover .status-open{color:var(--text)}

/* ── INVESTIGATION ── */
.main-layout{display:flex;flex:1;overflow:hidden}

/* Steps */
.steps-col{width:340px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--b1);overflow-y:auto;background:var(--s1)}
.steps-col::-webkit-scrollbar{width:3px}.steps-col::-webkit-scrollbar-thumb{background:var(--b2)}
.step-card{padding:20px;border-bottom:1px solid var(--b1);transition:background .2s}
.step-card.locked{opacity:.35;pointer-events:none}
.step-card.done{background:rgba(85,130,255,.04)}
.step-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.step-num{width:28px;height:28px;flex-shrink:0;border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--dim);transition:all .2s}
.step-num.active{border-color:var(--blue);color:var(--blue);box-shadow:0 0 8px rgba(85,130,255,.3)}
.step-num.done-num{border-color:var(--blue);background:var(--blue);color:#fff}
.step-title{flex:1;font-size:14px;font-weight:600}
.step-check{width:18px;height:18px;flex-shrink:0;border:1px solid var(--b2);position:relative;transition:all .2s}
.step-check.checked{background:var(--blue);border-color:var(--blue)}
.step-check.checked::after{content:'';position:absolute;left:4px;top:2px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg)}
.step-desc{font-size:12px;color:var(--mid);line-height:1.6;margin-bottom:12px}
.code-preview{background:var(--bg);border:1px solid var(--b1);padding:9px 14px;margin-bottom:12px;font-family:var(--mono);font-size:12px}
.cp-kw{color:#7c9fff}.cp-str{color:#85e89d}.cp-dim{color:var(--dim)}.cp-val{color:var(--blue);font-weight:700}
.action-btn{width:100%;padding:11px;background:transparent;border:1px solid var(--blue);color:var(--blue);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,color .15s}
.action-btn:hover:not(:disabled){background:var(--blue);color:#fff}
.action-btn:disabled{opacity:.3;cursor:not-allowed}
.tri{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor}
.accuse-input-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.input-label{font-family:var(--mono);font-size:12px;color:var(--mid)}
.suspect-input{width:70px;padding:8px 10px;background:var(--bg);border:1px solid var(--b2);color:var(--text);font-family:var(--mono);font-size:16px;font-weight:700;text-align:center;outline:none;transition:border-color .15s}
.suspect-input:focus{border-color:var(--blue)}
.suspect-input.input-error{border-color:var(--red);animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Output */
.output-col{flex:1;display:flex;flex-direction:column;overflow:hidden}
.output-section{flex:1;display:flex;flex-direction:column;overflow:hidden}
.hood-section{height:130px;flex-shrink:0;border-top:1px solid var(--b1)}
.section-label{padding:8px 16px;border-bottom:1px solid var(--b1);font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:1.5px;background:var(--s2);flex-shrink:0}
.output-pane{flex:1;padding:20px;overflow-y:auto}
.output-pane::-webkit-scrollbar{width:3px}.output-pane::-webkit-scrollbar-thumb{background:var(--b2)}
.output-placeholder{color:var(--dim);font-family:var(--mono);font-size:12px;text-align:center;margin-top:60px;letter-spacing:2px}
.hood-code{margin:0;padding:12px 16px;font-family:var(--mono);font-size:12px;color:var(--mid);line-height:1.7;white-space:pre-wrap;overflow-y:auto;height:100%}

/* Records */
.section-title{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.record-card{border:1px solid var(--b2);background:var(--s1);padding:14px 16px;margin-bottom:8px}
.record-card.record-alert{border-color:var(--blue);background:rgba(85,130,255,.05)}
.record-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.record-id{font-family:var(--mono);font-size:11px;color:var(--dim)}
.record-name{font-size:14px;font-weight:700;flex:1}
.record-badge{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--blue);border:1px solid var(--blue);padding:2px 6px}
.badge-warn{color:var(--yellow);border-color:var(--yellow)}
.badge-ok{color:var(--green);border-color:var(--green)}
row{display:flex;gap:8px;margin-bottom:4px;font-size:12px;color:var(--mid);line-height:1.5}
k{color:var(--dim);font-family:var(--mono);font-size:10px;min-width:60px;padding-top:1px;flex-shrink:0}
.record-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--b2);padding:2px 7px}

/* Result cards */
.result-card{padding:18px 22px;border:1px solid;display:flex;align-items:flex-start;gap:14px}
.result-ok{border-color:var(--blue);background:rgba(85,130,255,.06)}
.result-fail{border-color:var(--red);background:rgba(255,68,85,.06)}
.result-icon{font-size:22px;font-family:var(--mono)}
.result-ok .result-icon{color:var(--blue)}.result-fail .result-icon{color:var(--red)}
.result-msg{font-size:14px;font-weight:600;line-height:1.5}
.result-hint{font-family:var(--mono);font-size:11px;color:var(--mid);margin-top:5px}
.err-card{padding:14px;border:1px solid var(--red);color:var(--red);font-family:var(--mono);font-size:12px}

/* Fail shake */
@keyframes fail-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.fail-shake{animation:fail-shake .4s ease}

/* Win */
.win-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;animation:fadein .4s}
.win-box{width:480px;border:1px solid var(--blue);background:var(--s1);padding:40px;text-align:center;box-shadow:0 0 60px rgba(85,130,255,.12);animation:slideup .4s}
.win-logo{margin-bottom:24px}.win-logo img{height:24px}
.win-label{font-family:var(--mono);font-size:10px;color:var(--blue);letter-spacing:3px;margin-bottom:12px}
.win-title{font-size:24px;font-weight:900;margin-bottom:12px}
.win-detail-box{border:1px solid var(--b2);padding:14px 18px;text-align:left;margin:14px 0}
.win-detail-name{font-size:15px;font-weight:700;color:var(--blue)}
.win-sub{font-family:var(--mono);font-size:11px;color:var(--mid);letter-spacing:1px}
.win-close,.win-next{padding:11px 24px;border:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .15s}
.win-close{background:var(--blue);color:#fff}.win-close:hover{background:#6b93ff}
.win-next{background:transparent;border:1px solid var(--b2);color:var(--mid)}.win-next:hover{border-color:var(--blue);color:var(--blue)}

@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slideup{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}



/* ── НОВЫЕ СТИЛИ ДЛЯ РЕДАКТОРА ── */

.steps-col {
    width: 420px !important; /* Увеличиваем ширину под редактор */
    background: var(--bg);
}

.steps-list {
    flex: 0 0 auto;
    max-height: 250px;
    overflow-y: auto;
    border-bottom: 1px solid var(--b1);
    background: var(--s1);
}

.editor-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#code-editor {
    flex: 1;
    width: 100%;
    font-size: 14px;
    background: #0c0c0c; /* Немного темнее основного фона */
}

.editor-footer {
    padding: 16px;
    background: var(--s2);
    border-top: 1px solid var(--b1);
}

.execute-btn {
    width: 100%;
    padding: 14px;
    background: var(--green);
    color: #000;
    border: none;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s;
}

.execute-btn:hover {
    background: #00ff88;
}

.step-card {
    cursor: pointer;
    border-left: 3px solid transparent;
}

.step-card.active-step {
    background: rgba(85, 130, 255, 0.08);
    border-left-color: var(--blue);
}

.step-card.active-step .step-num {
    border-color: var(--blue);
    color: var(--blue);
}

/* Стили Ace (переопределение для темной темы) */
.ace_gutter { background: #0c0c0c !important; color: #444 !important; }
.ace_content { background: #0c0c0c !important; }

/* ════════════════════════════════════════════════════
   ANIMATIONS & ENHANCEMENTS
════════════════════════════════════════════════════ */

/* ── Матричный дождь ── */
#matrix-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
#welcome-screen { overflow: hidden; }
.welcome-logo, .welcome-card { position: relative; z-index: 1; }

/* ── Появление карточек дел (stagger) ── */
@keyframes card-enter {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.case-card { position: relative; }
.case-card.animating {
    opacity: 0;
    animation: card-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Неоновое свечение при наведении ── */
.case-card:hover {
    background: var(--s1);
    box-shadow: 0 0 40px rgba(85,130,255,0.12), inset 0 0 30px rgba(85,130,255,0.04);
    transition: background .15s, box-shadow .3s;
}

/* ── Пульсирующая рамка у решённых дел ── */
.case-card.case-solved { position: relative; }
.case-card.case-solved::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(85,130,255,0.15);
    animation: solved-border-pulse 3s ease-in-out infinite;
}
@keyframes solved-border-pulse {
    0%,100% { border-color: rgba(85,130,255,0.15); }
    50%     { border-color: rgba(85,130,255,0.6);
              box-shadow: inset 0 0 20px rgba(85,130,255,0.07); }
}

/* ── Shimmer-анимация кнопки ЗАПУСТИТЬ КОД ── */
.execute-btn { position: relative; overflow: hidden; }
.execute-btn.scanning { background: #00ff88; }

@keyframes btn-shimmer {
    from { left: -70%; }
    to   { left: 150%; }
}
.execute-btn.scanning::before {
    content: '';
    position: absolute;
    top: 0; left: -70%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    animation: btn-shimmer 0.65s ease;
    pointer-events: none;
}

/* ── Вспышка при выполнении шага ── */
@keyframes step-flash {
    0%   { background: rgba(85,130,255,0.22);
           box-shadow: inset 0 0 24px rgba(85,130,255,0.18); }
    100% { background: transparent; box-shadow: none; }
}
.step-card.flash-complete { animation: step-flash 0.75s ease forwards; }

/* ── Усиленный активный шаг ── */
.step-card.active-step {
    box-shadow: inset 0 0 20px rgba(85,130,255,0.06);
}
.step-card.active-step .step-num {
    box-shadow: 0 0 10px rgba(85,130,255,0.45);
}

/* ── Сканирующая линия в панели вывода ── */
.output-pane { position: relative; }

@keyframes output-scan {
    0%   { top: 0;    opacity: 0.9; }
    100% { top: 100%; opacity: 0;   }
}
.output-scan-el {
    position: absolute;
    left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
    pointer-events: none;
    animation: output-scan 0.7s linear;
    z-index: 5;
}

/* ── Глич-мерцание UI-элементов ── */
@keyframes glitch-flicker {
    0%,100% { opacity: 1; transform: none; }
    15% { opacity: 0.8; transform: translate(-3px,0) skewX(-5deg); color: var(--blue); }
    35% { opacity: 1;   transform: translate(2px,0); }
    55% { opacity: 0.9; transform: translate(-1px,0) skewX(3deg); color: var(--red); }
    75% { opacity: 1;   transform: translate(1px,0); color: inherit; }
}
.glitch-active { animation: glitch-flicker 0.2s ease !important; }

/* ── Глич-появление окна победы ── */
@keyframes win-appear {
    0%   { opacity: 0; transform: translateY(18px) skewX(-2deg); filter: blur(5px); }
    35%  { opacity: 1; transform: translateY(-3px) skewX(0.8deg); filter: blur(0); }
    55%  { transform: translateY(2px); }
    75%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}
.win-box { animation: win-appear 0.55s cubic-bezier(0.22,1,0.36,1) !important; }

/* ── Канвас частиц победы ── */
#win-particles {
    position: fixed; inset: 0;
    z-index: 298;
    pointer-events: none;
}

/* ── Прыжок счётчика решённых дел ── */
@keyframes count-bounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.3); color: var(--blue); }
    65%  { transform: scale(0.93); }
    100% { transform: scale(1); }
}
#solved-count.count-bounce { animation: count-bounce 0.5s ease; display: inline-block; }

/* ── Свечение логотипа при наведении ── */
.header-logo img { transition: filter 0.25s; }
.header-logo:hover img { filter: drop-shadow(0 0 8px rgba(85,130,255,0.75)); }

/* ── Усиленная анимация точки LIVE ── */
@keyframes pulse-enhanced {
    0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 6px var(--blue); }
    50%     { opacity:.25; transform:scale(0.7); box-shadow:0 0 2px var(--blue); }
}
.pulse-dot { animation: pulse-enhanced 2.2s ease-in-out infinite; }

/* ── Стиль для win-detail (BUG FIX: не было CSS) ── */
.win-detail {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--mid);
    margin: 10px 0 6px;
    line-height: 1.6;
    padding: 10px 14px;
    border: 1px solid var(--b1);
    background: var(--bg);
    text-align: left;
}

/* ── Статусы карточек дел (BUG FIX: классы были в CSS но не применялись) ── */
.status-solved { color: var(--blue); }
.status-open   { color: var(--dim);  }
.case-card:hover .status-open { color: var(--text); transition: color .15s; }