/* =========================================================
   LUMON TERMINAL PRO × FALLOUT × 80s NOIR
   Palette: deep navy + CRT cyan + bone + warm amber accent
   ========================================================= */

:root {
    /* Base — глубокий синий-серый */
    --bg:          #0a1014;
    --bg-2:        #0f1820;
    --bg-3:        #142028;

    /* Корпус терминала Lumon — тёплый бежевый */
    --case:        #d9cdb4;
    --case-2:      #b8a98a;
    --case-dark:   #4a4233;
    --case-shadow: #2a241b;

    /* CRT экран — фирменный бирюзово-голубой Lumon */
    --screen-bg:   #0a1f24;
    --screen-bg-2: #061418;
    --screen:      #a8f0e8;
    --screen-dim:  #6cc8c0;
    --screen-glow: #5fe3d4;

    /* Акценты */
    --amber:       #e8b04a;
    --amber-dim:   #a07a2e;
    --bone:        #e8dfc8;
    --bone-dim:    #b8ad92;
    --red:         #c04040;
    --green-led:   #6fffae;

    /* UI */
    --text:        #d9d2bf;
    --muted:       #8a8270;
    --border:      #2a3a44;
    --border-2:    #3d5260;

    /* Шрифты с поддержкой кириллицы */
    --font-mono:   'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --font-sans:   'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(95, 227, 212, 0.06), transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(232, 176, 74, 0.04), transparent 50%),
        linear-gradient(160deg, #0a1014 0%, #0f1820 50%, #0a1014 100%);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
}

button { font-family: var(--font-mono); }

/* ----- Глобальные CRT-эффекты ----- */
.crt-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.18) 0px,
        rgba(0,0,0,0.18) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.35;
}

.crt-vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}

.scanlines {
    position: fixed; inset: 0; pointer-events: none; z-index: 2;
    background: repeating-linear-gradient(
        to bottom,
        rgba(95, 227, 212, 0.015) 0px,
        rgba(95, 227, 212, 0.015) 1px,
        transparent 1px,
        transparent 4px
    );
}

.app-shell {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 100vh;
}

/* =========================================================
   КНОПКИ
   ========================================================= */
.terminal-button {
    border: 1px solid var(--screen-dim);
    background: linear-gradient(180deg, #0e2428 0%, #061418 100%);
    color: var(--screen);
    padding: 9px 14px;
    border-radius: 2px;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.2px;
    box-shadow:
        inset 0 1px 0 rgba(168, 240, 232, 0.15),
        0 0 0 1px rgba(0,0,0,0.4),
        0 2px 8px rgba(95, 227, 212, 0.12);
    transition: all 0.15s ease;
}

.terminal-button:hover {
    background: linear-gradient(180deg, #143036 0%, #0a1f24 100%);
    box-shadow:
        inset 0 1px 0 rgba(168, 240, 232, 0.25),
        0 0 12px rgba(95, 227, 212, 0.35);
    color: #d4faf3;
}

.terminal-button.success {
    border-color: var(--amber);
    color: var(--amber);
    background: linear-gradient(180deg, #2a1f0a 0%, #1a1305 100%);
    box-shadow:
        inset 0 1px 0 rgba(232, 176, 74, 0.2),
        0 2px 8px rgba(232, 176, 74, 0.15);
}

.terminal-button.success:hover {
    box-shadow: 0 0 14px rgba(232, 176, 74, 0.4);
}

.terminal-button.secondary {
    color: var(--bone);
    border-color: var(--border-2);
    background: var(--bg-3);
}

.terminal-button.danger {
    color: var(--red);
    border-color: var(--red);
    background: linear-gradient(180deg, #2a0d0d 0%, #1a0606 100%);
}

.full-width { width: 100%; margin-bottom: 16px; }

/* =========================================================
   САЙДБАР
   ========================================================= */
.sidebar {
    padding: 22px 18px;
    background:
        linear-gradient(180deg, rgba(95, 227, 212, 0.03), transparent 30%),
        var(--bg-2);
    border-right: 1px solid var(--border);
    box-shadow: inset -1px 0 0 rgba(95, 227, 212, 0.08);
    overflow-y: auto;
}

.brand { margin-bottom: 24px; }

.brand__terminal,
.terminal-label {
    color: var(--screen-dim);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(95, 227, 212, 0.4);
}

.brand h1 {
    margin: 10px 0 8px;
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.brand p {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.terminal-section { margin-top: 26px; }

.section-title,
.section-title-button {
    color: var(--amber);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
}

.episodes-list,
.task-list {
    display: grid;
    gap: 10px;
}

/* Эпизоды — карточки-папки */
.episode-item {
    position: relative;
    padding: 14px 12px 12px;
    background: linear-gradient(180deg, #2a3540 0%, #1c2630 100%);
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--amber);
    border-radius: 2px;
    color: var(--bone);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 13px;
    transition: all 0.2s;
}

.episode-item::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 10px;
    width: 80px;
    height: 9px;
    background: linear-gradient(180deg, #2a3540, #1c2630);
    border: 1px solid var(--border-2);
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

.episode-item:hover {
    background: linear-gradient(180deg, #344050 0%, #222e3a 100%);
    border-left-color: var(--screen);
}

.episode-item.active {
    border-color: var(--screen);
    border-left-color: var(--screen);
    box-shadow: 0 0 0 1px var(--screen-dim), 0 0 12px rgba(95, 227, 212, 0.2);
}

.episode-item.locked {
    filter: grayscale(0.7);
    opacity: 0.45;
    cursor: not-allowed;
}

.task-item {
    padding: 11px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-left: 2px solid var(--border-2);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12.5px;
    transition: all 0.15s;
}

.task-item:hover {
    border-left-color: var(--screen-dim);
    background: #18242e;
}

.task-item.active {
    border-left-color: var(--amber);
    background: #1a2530;
}

.task-item.locked {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.task-item.locked:hover {
    border-left-color: var(--border-2);
    background: var(--bg-3);
}

.lock-mark {
    margin-left: 4px;
    opacity: 0.7;
    font-size: 11px;
}

.item-title { font-weight: 500; }
.item-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--muted);
}

.completed-mark {
    color: var(--green-led);
    font-weight: 700;
    margin-left: 4px;
    text-shadow: 0 0 6px rgba(111, 255, 174, 0.5);
}

/* =========================================================
   ОСНОВНАЯ ОБЛАСТЬ
   ========================================================= */
.main {
    padding: 24px;
    overflow-x: hidden;
}

.top-terminal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 22px;
    background:
        linear-gradient(180deg, rgba(95, 227, 212, 0.04), transparent),
        var(--bg-2);
    border: 1px solid var(--border);
    border-top: 2px solid var(--screen-dim);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.top-terminal__info { flex: 1; min-width: 0; }

.top-terminal h2 {
    margin: 6px 0 4px;
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.top-terminal p {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 13px;
}

.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* =========================================================
   ВХОДЯЩЕЕ СООБЩЕНИЕ — Lumon-стайл терминал
   ========================================================= */
.mail-terminal {
    margin-bottom: 24px;
    background: var(--screen-bg);
    border: 1px solid var(--screen-dim);
    border-radius: 4px;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(0,0,0,0.4),
        0 8px 24px rgba(0,0,0,0.6),
        0 0 30px rgba(95, 227, 212, 0.08);
    position: relative;
    overflow: hidden;
}

.mail-terminal::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(95, 227, 212, 0.04) 0px,
        rgba(95, 227, 212, 0.04) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 1;
}

.mail-terminal__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #0d2428 0%, #061418 100%);
    border-bottom: 1px solid var(--screen-dim);
    color: var(--screen);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    position: relative;
    z-index: 2;
}

.mail-terminal__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 8px var(--red);
    animation: blink 1.4s step-end infinite;
}

.mail-terminal__title { flex: 1; }

.mail-terminal__meta {
    color: var(--screen-dim);
    font-size: 10.5px;
}

.mail-terminal__body {
    padding: 22px 26px;
    position: relative;
    z-index: 2;
}

.email-card {
    color: var(--screen);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.7;
    text-shadow: 0 0 8px rgba(95, 227, 212, 0.25);
}

.email-card::before { display: none; }

.email-card p { margin: 0 0 12px; }
.email-card p:last-child { margin-bottom: 0; }

.mail-terminal__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 18px;
    background: linear-gradient(180deg, #061418 0%, #030c0e 100%);
    border-top: 1px dashed var(--screen-dim);
    color: var(--screen-dim);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    position: relative;
    z-index: 2;
}

/* =========================================================
   РАБОЧАЯ ОБЛАСТЬ
   ========================================================= */
.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 22px;
}

.task-card, .sql-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-top: 2px solid var(--amber-dim);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    padding: 22px;
    margin-bottom: 22px;
}

.sql-card { border-top-color: var(--screen-dim); }

.task-header, .editor-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.task-header h3, .editor-header h3 {
    margin: 4px 0 0;
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
}

.editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.task-status {
    border: 1px solid var(--border-2);
    padding: 6px 12px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 2px;
}

.task-status.done {
    border-color: var(--green-led);
    color: var(--green-led);
    background: rgba(111, 255, 174, 0.08);
    text-shadow: 0 0 6px rgba(111, 255, 174, 0.4);
}

/* Сюжетный текст */
.story {
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.65;
}

.story p { margin: 0 0 10px; }
.story p:last-child { margin-bottom: 0; }

.objective {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--bg-3);
    border-left: 3px solid var(--amber);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    border-radius: 0 2px 2px 0;
}

.objective strong {
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 6px;
}

.objective code {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--screen);
}

.hint-box { margin-top: 16px; }

#hintText {
    margin-top: 10px;
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 13px;
    font-style: italic;
    line-height: 1.55;
}

/* CodeMirror */
.CodeMirror {
    height: auto !important;
    min-height: 200px;
    border: 1px solid var(--screen-dim);
    border-radius: 2px;
    font-family: var(--font-mono) !important;
    font-size: 13.5px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    margin-top: 4px;
}

.CodeMirror-gutters {
    background: #061418 !important;
    border-right: 1px solid var(--border) !important;
}

#sqlInput {
    width: 100%;
    min-height: 180px;
    background: var(--screen-bg);
    color: var(--screen);
    border: 1px solid var(--screen-dim);
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
}

.result-status {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.result-status.ok {
    color: var(--green-led);
    text-shadow: 0 0 6px rgba(111, 255, 174, 0.4);
}

.result-status.error { color: var(--red); }

.result-table {
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 2px;
}

.result-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 13px;
}

.result-table th, .result-table td {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}

.result-table th {
    background: var(--bg-3);
    color: var(--amber);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.result-table td { color: var(--text); }

/* =========================================================
   LUMON TERMINAL PRO
   ========================================================= */
.lumon-terminal {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.terminal-frame {
    width: 100%;
    background: linear-gradient(160deg, var(--case) 0%, var(--case-2) 100%);
    border: 1px solid var(--case-dark);
    border-radius: 14px 14px 8px 8px;
    padding: 18px 16px 12px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 12px 28px rgba(0, 0, 0, 0.7),
        0 2px 0 var(--case-shadow);
    position: relative;
}

.terminal-frame::before,
.terminal-frame::after {
    content: "";
    position: absolute;
    width: 6px; height: 6px;
    background: radial-gradient(circle at 35% 35%, #f0e6d0, var(--case-dark));
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
.terminal-frame::before { top: 8px; left: 8px; }
.terminal-frame::after  { top: 8px; right: 8px; }

.terminal-screen {
    background: radial-gradient(ellipse at center, var(--screen-bg) 0%, var(--screen-bg-2) 100%);
    border-radius: 6px;
    padding: 6px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.85),
        inset 0 0 4px rgba(0, 0, 0, 0.9),
        0 0 0 2px var(--case-dark),
        0 0 0 3px rgba(0,0,0,0.3);
}

.terminal-scanlines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(95, 227, 212, 0.05) 0px,
        rgba(95, 227, 212, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 5;
}

.terminal-brightness {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(168, 240, 232, 0.15) 0%, transparent 65%);
    pointer-events: none;
    z-index: 4;
}

.terminal-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 110%, rgba(95, 227, 212, 0.1), transparent 60%);
    pointer-events: none;
    z-index: 3;
}

.terminal-content {
    position: relative;
    z-index: 6;
    padding: 14px 16px;
    color: var(--screen);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 340px;
    text-shadow: 0 0 6px rgba(95, 227, 212, 0.45);
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--screen-dim);
    padding-bottom: 8px;
    margin-bottom: 14px;
    color: var(--screen);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.blink { animation: blink 1.2s step-end infinite; }

@keyframes blink {
    50% { opacity: 0.15; }
}

.schema-box {
    max-height: 420px;
    overflow-y: auto;
}

.schema-box::-webkit-scrollbar { width: 6px; }
.schema-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.schema-box::-webkit-scrollbar-thumb { background: var(--screen-dim); border-radius: 3px; }

.schema-table { margin-bottom: 14px; }

.schema-table h4 {
    margin: 0 0 6px;
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--amber-dim);
    padding-bottom: 3px;
    text-shadow: 0 0 6px rgba(232, 176, 74, 0.4);
}

.schema-table code {
    display: inline-block;
    background: rgba(10, 31, 36, 0.7);
    border: 1px solid rgba(95, 227, 212, 0.3);
    padding: 2px 7px;
    border-radius: 2px;
    margin: 2px 3px 2px 0;
    color: var(--screen);
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.terminal-label-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    margin-top: 10px;
    background: linear-gradient(180deg, var(--case-2), #9a8c6d);
    border: 1px solid var(--case-dark);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--case-dark);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

.terminal-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 2px;
}

.led {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #555;
    box-shadow:
        inset 0 0 2px rgba(0,0,0,0.5),
        0 0 6px currentColor;
}

.led--green { background: var(--green-led); color: var(--green-led); }
.led--amber { background: var(--amber);     color: var(--amber); }
.led--red   { background: var(--red);       color: var(--red); }

.vent {
    margin-left: auto;
    width: 50px;
    height: 10px;
    background: repeating-linear-gradient(
        90deg,
        var(--case-dark) 0px,
        var(--case-dark) 2px,
        transparent 2px,
        transparent 5px
    );
    border-radius: 2px;
    opacity: 0.6;
}

.terminal-stand {
    width: 35%;
    height: 14px;
    background: linear-gradient(180deg, var(--case-2), var(--case-dark));
    margin: -2px auto 0;
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

.terminal-base {
    width: 65%;
    height: 8px;
    background: linear-gradient(180deg, var(--case-dark), var(--case-shadow));
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

/* =========================================================
   ДОСКА РАССЛЕДОВАНИЙ
   ========================================================= */
.case-board-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 10, 0.92);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    padding: 40px 20px;
}

.case-board-overlay.hidden { display: none; }

.case-board {
    width: 100%;
    max-width: 1280px;
    max-height: 90vh;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.15), transparent),
        repeating-linear-gradient(
            45deg,
            #3d2f1f 0px,
            #3d2f1f 2px,
            #34281a 2px,
            #34281a 4px
        );
    border: 14px solid;
    border-image: linear-gradient(180deg, #6e5634, #3a2c1a) 1;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.7),
        0 0 50px rgba(0,0,0,0.9);
    padding: 28px 32px;
    overflow-y: auto;
    position: relative;
}

.case-board-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
}

.case-board-header h2 {
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 500;
    margin: 6px 0 4px;
    letter-spacing: -0.3px;
}

.case-board-header p {
    color: var(--bone-dim);
    font-family: var(--font-mono);
    font-size: 12.5px;
    margin: 0;
}

.red-threads {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.red-threads svg {
    width: 100%; height: 100%;
    opacity: 0.35;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

.case-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
    position: relative;
    z-index: 1;
}

/* Карточки на доске */
.case-card {
    background: linear-gradient(180deg, #f2ead5 0%, #e0d6bd 100%);
    color: #2a2419;
    border: 1px solid #8a7a5a;
    box-shadow:
        2px 4px 0 rgba(0,0,0,0.35),
        0 8px 16px rgba(0,0,0,0.5);
    padding: 16px 14px 14px;
    font-family: var(--font-mono);
    transform: rotate(-1deg);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.case-card:nth-child(2n)   { transform: rotate(0.8deg); }
.case-card:nth-child(3n)   { transform: rotate(-0.4deg); }
.case-card:nth-child(4n+1) { transform: rotate(1.2deg); }

.case-card:hover {
    transform: scale(1.04) rotate(0deg);
    z-index: 3;
    box-shadow:
        3px 6px 0 rgba(0,0,0,0.4),
        0 14px 28px rgba(0,0,0,0.6);
}

.case-card.locked {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* Канцелярская кнопка */
.case-card::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff5252, #8b0000);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.7),
        inset 0 -1px 2px rgba(0,0,0,0.4);
    z-index: 5;
}

.case-card__id {
    font-size: 10.5px;
    color: #7a5f30;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-bottom: 1px dashed #a38b6b;
    padding-bottom: 4px;
    margin-bottom: 8px;
    font-weight: 600;
}

.case-card__title {
    font-weight: 600;
    font-size: 15px;
    color: #1a1308;
    margin: 6px 0 8px;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.case-card__meta {
    font-size: 11.5px;
    color: #5e4e33;
    margin-top: 4px;
    line-height: 1.4;
}

.case-card__progress {
    margin-top: 12px;
    height: 4px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.case-card__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4a8a3a, #6fb04a);
    width: 0%;
    transition: width 0.3s;
    box-shadow: 0 0 4px rgba(74, 138, 58, 0.5);
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 1100px) {
    .app-shell { grid-template-columns: 1fr; }
    .workspace { grid-template-columns: 1fr; }
    .lumon-terminal { position: static; max-width: 480px; margin: 0 auto; }
}

@media (max-width: 600px) {
    .main { padding: 16px; }
    .top-terminal { flex-direction: column; padding: 16px; }
    .case-board-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ФИНАЛЬНАЯ РАЗВЯЗКА — листок с кофейным пятном и штампом
   ========================================================= */
.case-solved.hidden { display: none; }

.case-solved {
    margin-bottom: 22px;
}

.case-solved__paper {
    position: relative;
    background:
        linear-gradient(180deg, #f5ecd4 0%, #ead9b0 100%);
    color: #2a2113;
    padding: 32px 36px 28px;
    border: 1px solid #b59a64;
    border-radius: 2px;
    box-shadow:
        0 2px 0 rgba(0,0,0,0.15),
        0 12px 28px rgba(0,0,0,0.55),
        inset 0 0 60px rgba(120, 80, 30, 0.12);
    font-family: var(--font-sans);
    transform: rotate(-0.4deg);
    overflow: hidden;
}

/* "потёртости" по краям листа */
.case-solved__paper::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 5% 0%, rgba(0,0,0,0.08), transparent 30%),
        radial-gradient(ellipse at 95% 100%, rgba(0,0,0,0.08), transparent 30%);
}

/* кофейное пятно */
/* The paper background */
.paper {
  position: relative;
  width: 400px;
  height: 500px;
  background-color: #fcf9f2;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 40px;
  overflow: hidden;
}

/* The coffee ring */
.coffee-stain {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 150px;
  height: 145px; /* Slightly uneven to look organic */
  border-radius: 53% 47% 51% 49% / 45% 56% 44% 55%; /* Irregular circle */

  /* Creates the dark outer rim and light inner pool */
  background: radial-gradient(
    circle at 45% 48%,
    rgba(139, 90, 43, 0.08) 60%,
    rgba(110, 68, 29, 0.35) 75%,
    rgba(80, 48, 18, 0.6) 88%,
    transparent 92%
  );

  /* Blurs the hard edges slightly */
  filter: blur(1px);

  /* Blends beautifully with text underneath */
  mix-blend-mode: multiply;

  /* Tilts the ring naturally */
  transform: rotate(15deg);

  /* Ensures user can still select text underneath */
  pointer-events: none;
}

/* Optional: Add a second overlapping dripping effect */
.coffee-stain::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80, 48, 18, 0.4) 0%, transparent 70%);
  filter: blur(2px);
}


/* штамп CASE CLOSED */
.case-solved__stamp {
    position: absolute;
    top: 28px;
    right: -10px;
    transform: rotate(8deg);
    padding: 8px 18px;
    border: 3px double #8b0000;
    color: #8b0000;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: rgba(245, 236, 212, 0.0);
    text-shadow: 0 0 1px rgba(139,0,0,0.4);
    opacity: 0.85;
    box-shadow: inset 0 0 8px rgba(139,0,0,0.15);
    z-index: 3;
}

.case-solved__header {
    color: #6b5224;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px dashed #b59a64;
    padding-bottom: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.case-solved__body {
    position: relative;
    z-index: 2;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.7;
    color: #2a2113;
}

.case-solved__body p { margin: 0 0 12px; }
.case-solved__body p:last-child { margin-bottom: 0; }
.case-solved__body strong { color: #1a1308; }

.case-solved__signature {
    margin-top: 22px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: #6b5224;
    text-align: right;
    font-style: italic;
    position: relative;
    z-index: 2;
}