body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f6fa;
    color: #1a1a1a;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}		 

.card {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 82, 204, 0.06);
    max-width: 540px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    display: block;
}

.card.wide {
    max-width: 900px;
}

.hidden {
    opacity: 0;
    display: none !important;
}

h1 {
    color: #0052cc;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.subtitle {
    color: #666666;
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

label {
    display: block;
    font-size: 12px;
    color: #333333;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
}

input[type="text"], input[type="password"], select {
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
}

input:focus, select:focus {
    outline: none;
    border-color: #0052cc;
}

button {
    background-color: #0052cc;
    color: #ffffff;
    padding: 14px 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
}

button:hover {
    background-color: #003d99;
}

button:active {
    transform: scale(0.98);
}

button.secondary {
    background-color: #eef2f7;
    color: #4a5568;
}

button.secondary:hover {
    background-color: #e2e8f0;
}

.error-message {
    color: #de350b;
    font-size: 13px;
    margin-top: 12px;
    display: none;
}
/* Стили для нового модуля Просмотрового Чтения */
.case-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    margin-top: 20px;
}

.question-item {
    transition: all 0.3s ease;
    padding: 15px;
    border-radius: 8px;
}

.question-item label {
    transition: all 0.2s ease;
}

.question-item label:hover {
    background: #f1f5f9 !important;
    border-color: #0052cc !important;
    color: #0052cc;
}

/* Эффект при клике на радиокнопку */
.question-item input[type="radio"]:checked + span, 
.question-item label:has(input[type="radio"]:checked) {
    background: #e0e7ff !important;
    border-color: #0052cc !important;
    font-weight: 600;
}
/* --- СТИЛИ ДЛЯ ИГР НА КОНЦЕНТРАЦИЮ ВНИМАНИЯ --- */
.attention-clickable {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 28px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}
.attention-clickable:hover {
    transform: scale(1.08);
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.attention-clickable.found {
    background: #e3fcef !important;
    border-color: #36b37e !important;
    transform: scale(0.95);
    pointer-events: none;
}

/* --- ПРОСТРАНСТВЕННАЯ ПАМЯТЬ (ЭМОДЗИ) --- */
.memory-grid {
    display: grid;
    gap: 12px;
    margin: 20px auto;
    max-width: 600px;
    justify-content: center;
}

.memory-cell {
    width: 80px;
    height: 80px;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
.memory-cell:hover { 
    border-color: #0052cc; 
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.15);
}

.memory-dock {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 20px;
    background: #f0f4fa;
    border-radius: 12px;
    margin-top: 20px;
    border: 2px dashed #0052cc;
}

.memory-dock-card {
    width: 65px;
    height: 65px;
    background: #ffffff;
    border: 2px solid #94a3b8;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.memory-dock-card.active-pick {
    transform: scale(1.15);
    border-color: #36b37e;
    background: #ecfdf5;
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.25);
    z-index: 2;
}

.memory-dock-card.placed {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
}

/* --- ТАБЛИЦА ШУЛЬТЕ 5x5 --- */
.schulte-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    max-width: 420px;
    margin: 20px auto;
    width: 100%;
}

.schulte-cell {
    aspect-ratio: 1 / 1; 
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    color: #0052cc;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.schulte-cell:active {
    background: #e0e8ff;
    transform: scale(0.92);
}

.schulte-cell.rotated {
    transform: rotate(180deg);
}
.schulte-cell.rotated:active {
    transform: rotate(180deg) scale(0.92);
}
.schulte-cell.correct {
    background: #e3fcef;
    border-color: #36b37e;
    color: #1d7f54;
}

@media (max-width: 480px) {
    .schulte-grid {
        gap: 5px;
    }
    .schulte-cell {
        font-size: 18px;
    }
}

/* --- ТЕСТ СТРУПА --- */
#stroop-word {
    font-size: 4em; 
    font-weight: 900;
    margin: 30px 0;
    letter-spacing: 2px;
    text-transform: uppercase; 
    transition: color 0.2s ease, border 0.2s ease; 
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
}
.stroop-grid {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.stroop-grid button {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stroop-grid button:hover {
    background: #f8fafc;
    border-color: #0052cc;
    color: #0052cc;
    transform: translateY(-2px);
}

/* --- МОРФОЛОГИЯ И ПОЧЕРК (АДАПТИРОВАННЫЙ ХАРДКОР) --- */
.bad-handwriting {
    font-family: 'Caveat', 'Marck Script', cursive;
    font-size: 28px;
    user-select: none;
}

.handwritten-container {
    padding: 30px;
    background: #fafafa;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    margin: 20px 0;
    min-height: 160px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
    overflow: hidden; 
    line-height: 2.1 !important; /* Чуть уменьшили интервал строк, так как буквы стали крупнее */
}

/* Общий сброс для сгенерированных букв-тегов span */
.handwriting-doctor span, 
.handwriting-sharp span, 
.handwriting-glitch span, 
.handwriting-messy span, 
.handwriting-chaos span, 
.handwriting-ghost span, 
.handwriting-squished span,
.handwriting-curvy span {
    display: inline-block;
    transform-origin: center center;
    white-space: normal;
    word-break: break-word;
}

/* 1. Врачебный почерк (Сеты 1 и 5) — Сделали просветы */
.handwriting-doctor {
    font-family: 'Caveat', cursive;
}
.handwriting-doctor span {
    letter-spacing: -0.09em !important; /* Было -0.21em */
    color: #222;
    transform: scaleX(0.76) skewX(-12deg); /* Сделали буквы шире */
}

/* 2. Небрежные каракули (Сет 4 со скрина) — Теперь можно прочитать! */
.handwriting-messy {
    font-family: 'Bad Script', cursive;
}
.handwriting-messy span {
    letter-spacing: -0.06em !important; /* Было -0.16em */
    color: #1c1c1c;
    transform: scaleX(0.80); /* Было 0.68 */
}

/* 3. Извивающийся размашистый курсив */
.handwriting-curvy {
    font-family: 'Marck Script', cursive;
}
.handwriting-curvy span {
    letter-spacing: -0.05em !important; /* Было -0.15em */
    color: #111;
    transform: scaleX(0.82) skewX(-6deg);
}

/* 4. Быстрый маркер (Сет 2) — Ослабили зажим для Neucha */
.handwriting-sharp {
    font-family: 'Neucha', cursive;
}
.handwriting-sharp span {
    letter-spacing: -0.10em !important; /* Было -0.24em */
    color: #2c3e50;
    transform: scaleX(0.78) skewX(-4deg);
}

/* 5. Экстремальное сжатие (Сет 8) */
.handwriting-squished {
    font-family: "Times New Roman", Times, serif;
}
.handwriting-squished span {
    font-weight: bold;
    font-style: italic;
    letter-spacing: -0.06em !important; /* Было -0.14em */
    color: #1e293b;
    transform: scaleX(0.68) skewX(-10deg);
}

@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap');

/* 6. Каллиграфический хаос (Сеты 3 и 9) */
.handwriting-glitch {
    font-family: 'Rubik Glitch', cursive;
}
.handwriting-glitch span {
    color: #1e293b;
    letter-spacing: -0.04em !important; /* Было -0.13em */
    text-transform: uppercase;
    text-shadow: 1px 0 rgba(255, 0, 0, 0.6), -1px 0 rgba(0, 0, 255, 0.6);
    transform: scaleX(0.78) skewX(4deg);
}

/* 7. Призрак (Сет 7) */
.handwriting-ghost {
    font-family: Arial, sans-serif;
}
.handwriting-ghost span {
    font-weight: 900;
    color: transparent;
    text-shadow: 0 0 4px rgba(15, 23, 42, 0.95);
    letter-spacing: -0.07em !important; /* Было -0.16em */
    transform: scaleX(0.75);
    opacity: 0.5;
}

/* 8. Юридический забор (Сет 6) */
.handwriting-chaos {
    font-family: "Courier New", Courier, monospace;
}
.handwriting-chaos span {
    font-weight: bold;
    letter-spacing: -0.09em !important; /* Было -0.20em */
    word-spacing: 6px;
    text-transform: uppercase;
    color: #0f172a;
    transform: scaleX(0.72) skewX(-8deg);
}
/* --- МОДУЛЬ НЕЙРОГИМНАСТИКИ (РАЗМИНКА) --- */
.neuro-workspace {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 35px auto;
    max-width: 650px;
}

.neuro-hand-card {
    background: #f8fafc;
    border: 3px solid #cbd5e1;
    border-radius: 12px;
    width: 260px;
    padding: 30px 15px;
    text-align: center;
    transition: all 0.15s ease-in-out;
}

/* Класс пульсации, который JS будет вешать на каждый такт метронома */
.neuro-hand-card.pulse {
    border-color: #0052cc;
    background: #f0f5ff;
    transform: scale(1.02);
}

.neuro-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.neuro-emoji {
    font-size: 64px; /* Крупные эмодзи, чтобы видеть краем глаза */
    line-height: 1;
    margin-bottom: 10px;
}

.neuro-text-hint {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
}
/* --- ТРЕНАЖЕР: ТЕКСТ ВВЕРХ НОГАМИ --- */
.upside-down-box {
    transform: scaleY(-1); /* Переворот вверх ногами */
    font-size: 20px;
    line-height: 1.9;
    text-align: center; /* Центрируем, чтобы короткие слова на старте смотрелись аккуратно */
    background: #fafbfc;
    padding: 30px;
    border-radius: 12px;
    border: 2px dashed #cbd5e1;
    margin: 25px 0;
    user-select: none;
    letter-spacing: 1px;
}
/* Экран промежуточного хлопка (вспышка) */
.neuro-flash-clap {
    background: #fff7ed !important;
    border-color: #ff9800 !important;
    animation: textBlur 0.2s ease;
}
/* --- МОДУЛЬ: ГИПЕР-СКОЛЬЖЕНИЕ (ДИНАМИЧЕСКИЙ ТУННЕЛЬ) --- */
.gliding-narrow-tunnel {
    max-width: 320px;
    margin: 25px auto;
    background: #1e293b; /* Глубокий темный фон для максимального контраста */
    padding: 40px 20px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
}

/* Стилизация строк текста */
.gliding-line {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    opacity: 0.05; /* Неактивные строки почти невидимы */
    transform: scale(0.9);
    transition: all 0.2s ease-in-out;
    margin: 8px 0;
}

/* 🔥 АКТИВНАЯ СТРОКА: Вспыхивает ярким белым цветом */
.gliding-line.active {
    opacity: 1;
    transform: scale(1.1);
}

.gliding-line span {
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    transition: opacity 0.15s ease-in-out;
    white-space: nowrap;
}

/* 🔥 БОКОВОЕ ТАЯНИЕ: Класс, который JS вешает посреди такта, сжигая бока */
.gliding-line.melt-sides span:first-child,
.gliding-line.melt-sides span:last-child {
    opacity: 0 !important; /* Левое и правое слово исчезают */
}
/* --- КЕЙСЫ И ВОПРОСЫ --- */
.content-text {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.quiz-area {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-top: 15px;
}

.trainer-word {
    color: black;
    transition: color 0.2s;
}

.trainer-word.highlight {
    color: #0052cc;
    font-weight: bold;
}

.text-block {
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #0052cc;
    margin-bottom: 25px;
    max-height: 250px;
    overflow-y: auto;
}

.quiz-options {
    text-align: left;
    margin-bottom: 25px;
}

.option-item {
    display: block;
    background: #fff;
    border: 1px solid #cbd5e1;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.option-item:hover {
    background: #f1f5f9;
}

.option-item input {
    margin-right: 10px;
}

/* --- 6 ШЛЯП ДЕ БОНО --- */
.hats-page-wrapper {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.banner-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background-color: #f0f7ff;
    border-radius: 12px;
}

.banner-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}

.banner-subtitle {
    font-size: 16px;
    color: #555;
}

.hats-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    padding: 15px;
    border-bottom: 2px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border-radius: 0 0 12px 12px;
}

.hats-sticky-header h3 { font-size: 12px; color: #64748b; margin: 0; text-transform: uppercase; }
.hats-sticky-header p { font-size: 16px; font-weight: 700; color: #1e293b; margin: 4px 0 0 0; }

.setup-banner { display: flex; align-items: center; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.banner-icon { font-size: 28px; margin-right: 16px; }

.btn-primary { width: 100%; padding: 15px; background: #0052cc; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; }
.btn-secondary { padding: 10px 15px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; }

.routes-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.route-option { padding: 15px; border: 2px solid #e2e8f0; border-radius: 8px; text-align: center; cursor: pointer; font-size: 13px; transition: 0.2s; }
.route-option:hover { border-color: #0052cc; background: #f0f7ff; }

.route-badge { background: #e0e7ff; color: #4338ca; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; }

.hats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 15px;
    padding: 0 10px 30px 10px;
}

.hat-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    position: relative;
    padding-left: 55px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    border-color: #0052cc;
}

.hat-icon {
    position: absolute;
    left: 15px;
    top: 15px;
    font-size: 24px;
}

.hat-title { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.hat-desc { font-size: 13px; color: #475569; line-height: 1.4; }

.hat-white { border-left: 6px solid #94a3b8; }
.hat-red { border-left: 6px solid #ef4444; }
.hat-black { border-left: 6px solid #1e293b; }
.hat-yellow { border-left: 6px solid #eab308; }
.hat-green { border-left: 6px solid #22c55e; }
.hat-blue { border-left: 6px solid #3b82f6; }

#timer-display {
    font-family: monospace; 
    font-size: 28px;
    font-weight: bold;
    color: #0f172a;
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* --- ЗЕРКАЛЬНЫЙ ТЕКСТ --- */
.mirror-box {
    transform: scaleX(-1);
    font-size: 19px;
    line-height: 1.8;
    text-align: right;
    background: #fafbfc;
    padding: 25px;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
    margin: 25px 0;
    user-select: none;
    letter-spacing: 0.5px;
}

/* --- ТРЕНАЖЕР СКОРОЧТЕНИЯ --- */
#text-container {
    font-size: 22px;
    line-height: 1.8;
    text-align: left;
    margin: 25px 0;
    min-height: 180px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    background: #fafbfc;
}

.word { display: inline-block; margin-right: 6px; transition: opacity 0.1s ease; opacity: 1; }
.invisible-word {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.1s ease;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.slider-group { display: flex; align-items: center; gap: 10px; }
#wpm-slider { width: 160px; }
#wpm-display { font-weight: bold; color: #0052cc; min-width: 75px; }

/* --- ТРЕНАЖЕР ВЕРБАЛЬНОЙ ГИБКОСТИ --- */
.wordshapes-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin: 20px 0;
    background: #f8fafc;
    padding: 30px;
    border-radius: 12px;
}

.wordshapes-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 700px;
}

.wordshapes-template {
    font-family: "Courier New", Courier, monospace;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #0f172a;
    text-align: right;
}

.wordshapes-input {
    padding: 10px 14px;
    font-size: 16px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    width: 100%;
    max-width: 260px;
    text-align: left;
    font-weight: 500;
    outline: none;
}

/* --- СТИЛИ ДЛЯ ПРИЗНАКОВ (СИНЯЯ b2b ГАММА) --- */
#patterns-row-container {
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    background: #ffffff; 
    border: 3px solid #0052cc; 
    border-radius: 12px;
    padding: 35px 15px; 
    margin: 25px auto; 
    max-width: 600px;
}

.pattern-shape-wrapper {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 90px; 
    height: 90px;
}

.p-shape { 
    transition: transform 0.2s; 
}
.p-shape.circle { border-radius: 50%; }
.p-shape.square { border-radius: 0; }
.p-shape.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.p-shape.diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.p-texture-black { background-color: #0052cc; }
.p-texture-grey { background-color: #4b91ff; }
.p-texture-striped { 
    background: repeating-linear-gradient(45deg, #0052cc, #0052cc 6px, #ffffff 6px, #ffffff 12px); 
    border: 1px solid #0052cc; 
}
.p-texture-dotted { 
    background: radial-gradient(#0052cc 25%, transparent 26%) #ffffff; 
    background-size: 8px 8px; 
    border: 1px solid #0052cc; 
}

.patterns-options-container { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin: 20px 0; 
}

.cortex-btn-mono {
    background: #ffffff; 
    border: 3px solid #0052cc; 
    padding: 12px 24px;
    font-size: 14px; 
    font-weight: bold; 
    color: #0052cc; 
    border-radius: 6px;
    cursor: pointer; 
    transition: all 0.15s;
}
.cortex-btn-mono:hover { 
    background: #0052cc; 
    color: #ffffff; 
}
#cortex-rsvp-container {
    max-width: 600px;
    margin: 30px auto;
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  .rsvp-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 82, 204, 0.05);
  }
  .rsvp-title { color: #0052cc; font-size: 22px; font-weight: 700; margin: 0 0 6px 0; text-transform: uppercase; letter-spacing: 0.5px; }
  .rsvp-subtitle { color: #64748b; font-size: 14px; margin: 0 0 30px 0; }
  
/* --- ТРЕНАЖЕР RSVP (СПРИНТ-ЧТЕНИЕ) --- */
#rsvp-word-display {
    font-size: 46px;
    font-weight: 800;
    color: #0f172a;
    height: 140px; /* Итоговая высота для длинных b2b слов */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafbfc;
    border: 3px solid #0052cc; /* Наша фирменная синяя b2b рамка */
    border-radius: 12px;
    margin-bottom: 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
    user-select: none;
    box-shadow: inset 0 2px 8px rgba(0, 82, 204, 0.03);
}

.rsvp-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.rsvp-btn {
    background: #0052cc;
    color: white;
    border: none;
    padding: 14px 35px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    min-width: 140px;
    transition: background 0.2s, transform 0.1s;
}

.rsvp-btn:hover { 
    background: #003d99; 
}

.rsvp-btn:active {
    transform: scale(0.98);
}

.rsvp-slider-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.rsvp-slider-group label { 
    font-size: 13px; 
    color: #334155; 
    font-weight: 600; 
    margin-bottom: 6px; 
    text-transform: uppercase; 
}

#rsvp-wpm-slider { 
    width: 100%; 
    cursor: pointer; 
}

.rsvp-progress-wrapper {
    background: #e2e8f0;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

#rsvp-progress-bar {
    background: #0052cc;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
}

/* --- СТИЛИ ДЛЯ СЛОГОВЫХ КУБИКОВ (СИНЯЯ b2b ГАММА) --- */
#cubes-targets-box {
    background: #f0f5ff; 
    border: 2px solid #0052cc; 
    padding: 15px;
    max-width: 600px; 
    margin: 15px auto; 
    border-radius: 6px; 
    text-align: left; 
    font-size: 15px;
    color: #0052cc;
    font-weight: 600;
}

.cubes-workspace {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 20px; 
    margin: 25px auto; 
    max-width: 650px;
}

.cube-container { 
    background: #ffffff; 
    border: 3px solid #0052cc; 
    border-radius: 8px; 
    overflow: hidden; 
    width: 240px; /* Фиксированная ширина куба остается */
}

.cube-header { 
    background: #0052cc; 
    color: #ffffff; 
    padding: 8px; 
    font-weight: bold; 
    font-size: 14px; 
    text-transform: uppercase; 
}

.cube-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* 🔥 ФИКС: фракции вместо 120px спасают рамки от срезания */
    grid-auto-rows: 55px; /* Автоматически создаст 4 строки по 55px под наши новые 8 ячеек */
}

.cube-cell {
    display: flex; 
    justify-content: center; 
    align-items: center;
    border: 1px solid #ced4da; 
    font-weight: bold; 
    font-size: 15px; 
    cursor: pointer; 
    background: #ffffff;
    color: #1a1a1a;
    transition: 0.15s;
    box-sizing: border-box; /* Гарантируем, что рамки входят в размер ячейки */
}

.cube-cell:hover { background: #f0f5ff; color: #0052cc; }
.cube-cell.selected { background: #0052cc; color: #ffffff; border-color: #0052cc; }
.cube-arrow { font-size: 32px; font-weight: bold; color: #0052cc; }
.cubes-current-build { font-size: 18px; font-weight: bold; margin: 15px 0; color: #0052cc; }

/* --- СТИЛИ ДЛЯ ФИЛВОРДА / БУКВЕННОЙ МАТРИЦЫ (СИНЯЯ b2b ГАММА) --- */
.wordsearch-layout { 
    display: flex; 
    justify-content: center; 
    gap: 25px; 
    max-width: 750px; 
    margin: 20px auto; 
}

#wordsearch-grid-container {
    display: grid; 
    grid-template-columns: repeat(6, 50px); 
    grid-template-rows: repeat(6, 50px);
    border: 3px solid #0052cc; 
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.08);
}

.ws-cell {
    display: flex; 
    justify-content: center; 
    align-items: center;
    border: 1px solid #e2e8f0; 
    font-weight: bold; 
    font-size: 18px; 
    cursor: pointer; 
    text-transform: uppercase;
    background: #ffffff;
    color: #0052cc;
    transition: background 0.15s;
}
.ws-cell:hover { background: #f0f5ff; }
.ws-cell.selected { background: #cbdffb; color: #0052cc; font-size: 20px; }
.ws-cell.found { background: #0052cc; color: #ffffff; cursor: default; border-color: #0052cc; }

.wordsearch-sidebar {
    width: 220px; 
    border: 3px solid #0052cc; 
    border-radius: 8px; 
    padding: 15px; 
    background: #ffffff; 
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.05);
}

.wordsearch-counter { 
    font-size: 16px; 
    font-weight: bold; 
    border-bottom: 2px solid #0052cc; 
    padding-bottom: 8px; 
    color: #0052cc;
}

.wordsearch-current-action { margin: 15px 0; font-size: 14px; font-weight: bold; color: #4a5568; }
#ws-current-word { color: #0052cc; font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.cortex-btn-mono-sm {
    background: #ffffff; 
    border: 2px solid #0052cc; 
    padding: 6px 14px; 
    font-size: 12px;
    font-weight: bold; 
    cursor: pointer; 
    border-radius: 4px;
    color: #0052cc;
    transition: 0.15s;
}
.cortex-btn-mono-sm:hover { background: #0052cc; color: #ffffff; }

.wordsearch-history-title { font-size: 13px; font-weight: bold; margin-top: 15px; color: #64748b; text-transform: uppercase; }
#ws-history-list { font-size: 14px; font-weight: bold; color: #1d7f54; margin-top: 5px; max-height: 110px; overflow-y: auto; }

/* --- ЭКРАН АНТИЦИПАЦИИ --- */
#anticipation-display {
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    font-size: 18px;
    line-height: 2;
}

.gap-input {
    border: none;
    border-bottom: 2px solid #0052cc;
    background: #f8fafc;
    padding: 5px 10px;
    margin: 0 5px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    border-radius: 4px 4px 0 0;
    outline: none;
    transition: all 0.2s ease;
}

.gap-input:focus {
    background: #eff6ff;
    border-bottom-color: #003d99;
}

/* --- РЕБУСЫ --- */
.rebus-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border: 2px dashed #0052cc;
    border-radius: 12px;
    padding: 15px;
    margin: 20px 0;
    max-width: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 82, 204, 0.05);
}

#rebus-image {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 6px;
}

.rebus-input-block {
    display: flex;
    flex-direction: column; 
    gap: 15px;
    margin-top: 20px;
    width: 100%;
}

#rebus-answer-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    text-align: center;
    letter-spacing: 1px;
}

#rebus-answer-input:focus {
    border-color: #0052cc;
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
}

.rebus-feedback {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: 0.3s;
}

#rebus-check-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
}

.rebus-feedback.success { background: #e2fbe8; color: #1e7e34; border: 1px solid #cdedd3; }
.rebus-feedback.error { background: #fde8e8; color: #c81e1e; border: 1px solid #f8b4b4; }

/* --- ДОПОЛНИТЕЛЬНЫЕ СТРУКТУРЫ --- */
.memory-card {
    width: 60px;
    height: 60px;
    background: #eef2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.spatial-btn {
    padding: 15px;
    background: #f0f5ff;
    border: 2px solid #0052cc;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #0052cc;
    font-weight: bold;
    transition: 0.3s;
}

.spatial-btn:hover { background: #0052cc; color: white; }
.spatial-btn.correct { background: #4CAF50; color: white; border-color: #3e8e41; }
.spatial-btn.wrong { background: #f44336; color: white; border-color: #d32f2f; }