.crossword-page {
    background: #fff;
    min-height: 100vh;
    padding-bottom: 48px;
}

.crossword-container {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 16px;
}

.crossword-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    font-size: 14px;
}

.crossword-breadcrumb a {
    color: #64748b;
}

.crossword-start p {
    margin: 0;
    color: #475569;
    font-size: 15px;
}

.crossword-start-note {
    display: none;
}

.crossword-start {
    max-width: 620px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.crossword-start h2 {
    margin: 0 0 8px;
    color: #0f172a;
}

.crossword-primary-btn,
.crossword-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.crossword-primary-btn {
    margin-top: 18px;
    padding: 12px 32px;
    color: white;
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    box-shadow: 0 4px 12px rgba(14, 116, 144, 0.28);
}

.crossword-secondary-btn {
    padding: 10px 22px;
    color: #0f172a;
    background: #e2e8f0;
}

.crossword-error {
    margin-top: 12px;
    color: #b91c1c;
    font-weight: 600;
}

.crossword-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.crossword-status {
    color: #475569;
    font-weight: 600;
}

.crossword-layout {
    display: grid;
    grid-template-columns: minmax(0, 600px) 1fr;
    gap: 24px;
    align-items: start;
}

.crossword-grid {
    display: grid;
    width: min(92vw, 600px);
    max-width: 100%;
    border: 2px solid #0f172a;
    background: #0f172a;
    overflow: hidden;
}

.crossword-cell {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    border: 1px solid #cbd5e1;
    background: white;
    line-height: 1;
}

.crossword-cell.is-block {
    background: #0f172a;
    border-color: #0f172a;
}

.crossword-cell.is-word-active {
    background: #dbeafe;
}

.crossword-cell.is-solved {
    background: #dcfce7;
    border-color: #86efac;
}

.crossword-cell.is-solved input {
    color: #166534;
}

.crossword-cell.is-active {
    outline: 3px solid #0ea5e9;
    z-index: 2;
}

.crossword-cell.is-wrong {
    background: #fee2e2;
}

.crossword-cell.is-correct {
    background: #dcfce7;
}

.crossword-cell input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: #0f172a;
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(15px, 3.2vw, 24px);
    font-weight: 700;
    line-height: 1;
}

.crossword-number {
    position: absolute;
    top: 1px;
    left: 3px;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.crossword-keys {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.crossword-keys button {
    min-width: 42px;
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: white;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.crossword-clues {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.crossword-clues h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 18px;
}

.crossword-clues ol {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.crossword-clues li {
    margin-bottom: 7px;
    padding: 7px 9px;
    border-radius: 6px;
    color: #334155;
    cursor: pointer;
}

.crossword-clues li.is-active {
    background: #dbeafe;
    color: #0f172a;
    font-weight: 700;
}

.crossword-solved-answer {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
}

.crossword-solved-answer:empty {
    display: none;
}

.crossword-clues li.is-solved .crossword-clue-text {
    color: #64748b;
}

/* Прелоадер на месте сетки (чтобы страница не прыгала при загрузке) */
.crossword-loading { display: none; width: min(92vw, 600px, 70vh); max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; align-items: center; justify-content: center; border: 2px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.crossword-loading.is-shown { display: flex; }
.crossword-spinner { width: 38px; height: 38px; border: 4px solid #cbd5e1; border-top-color: #0e7490; border-radius: 50%; animation: cw-spin .8s linear infinite; }
@keyframes cw-spin { to { transform: rotate(360deg); } }

/* Активная подсказка над сеткой — только на мобильных */
.crossword-active-clue { display: none; }

@media (max-width: 820px) {
    .crossword-layout {
        grid-template-columns: 1fr;
    }

    .crossword-start-note {
        display: block;
        max-width: 620px;
        margin: 14px auto 0;
        color: #475569;
        font-size: 15px;
        text-align: center;
    }

    .crossword-toolbar {
        justify-content: center;
    }

    .crossword-active-clue.is-shown {
        display: block;
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 0 10px;
        padding: 10px 14px;
        border: 2px solid #9cc6d3;
        border-radius: 8px;
        background: #f0fcff;
        color: #000;
        box-shadow: 0 1px 2px rgb(61, 197, 203);
    }

    .crossword-active-clue-meta {
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        opacity: 0.85;
    }

    .crossword-active-clue-text {
        font-size: 15px;
        font-weight: 600;
    }

    .crossword-active-clue-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .crossword-active-clue-hint {
        flex: none;
        padding: 0;
        border: 0;
        background: transparent;
        color: #0e7490;
        font-size: 14px;
        font-weight: 700;
        text-decoration: underline;
        cursor: pointer;
        white-space: nowrap;
    }

    .crossword-active-clue--done.is-shown {
        background: #dcfce7;
        border-color: #86efac;
        color: #166534;
    }

    .crossword-active-clue-next {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: #166534;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }
}
.crossword-settings { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0; justify-content: center; }
.crossword-setting { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 14px; }
.crossword-setting-label { font-weight: 600; color: #0f172a; margin-bottom: 2px; }
.crossword-setting label { font-weight: 400; }
.crossword-setting select { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; font-size: 14px; cursor: pointer; transition: border-color .15s; }
.crossword-setting select:hover { border-color: #0e7490; }
.crossword-setting select:focus { outline: 0; border-color: #0e7490; box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15); }
.crossword-cell--solved input,
.crossword-cell--solved input:disabled { background: #dcfce7; color: #166534; -webkit-text-fill-color: #166534; opacity: 1; font-weight: 700; cursor: default; pointer-events: none; }

/* Чипсы частей речи */
.crossword-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.crossword-chip { display: inline-flex; align-items: center; margin: 0; padding: 7px 14px; border: 1px solid #cbd5e1; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; }
.crossword-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.crossword-chip:hover { border-color: #0e7490; }
.crossword-chip.is-on,
.crossword-chip:has(input:checked) { background: #0e7490; border-color: #0e7490; color: #fff; }

/* Шапка воркспейса — по центру */
.crossword-workspace-header { text-align: center; margin: 8px 0 18px; }
.crossword-title { margin: 0 0 4px; color: #0f172a; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.crossword-title--sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crossword-params { margin: 0; color: #64748b; font-size: 14px; }
.crossword-breadcrumb-current { color: #0f172a; font-weight: 600; }
.crossword-breadcrumb-back { display: inline-flex; align-items: center; }
.crossword-breadcrumb-sep { color: #cbd5e1; }
.crossword-fav { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; padding: 4px; min-width: 32px; min-height: 32px; border: 0; background: transparent; color: #cbd5e1; font-size: 24px; line-height: 1; cursor: pointer; transition: color .15s, transform .1s; }
.crossword-fav:hover { color: #f59e0b; }
.crossword-fav.is-fav { color: #f59e0b; }
.crossword-fav:active { transform: scale(1.2); }

/* Кнопки — внизу, по центру */
.crossword-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.crossword-actions .crossword-primary-btn { margin-top: 0; padding: 11px 26px; }
.crossword-actions .crossword-status { width: 100%; text-align: center; margin-top: 4px; }
.crossword-hint-btn { background: #fef3c7; color: #92400e; }
.crossword-hint-btn:hover { background: #fde68a; }

/* Большая зелёная кнопка «Новый кроссворд» после завершения */
.crossword-new-big { flex: 0 0 100%; width: 100%; justify-content: center; padding: 14px 24px; color: #fff; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); box-shadow: 0 4px 14px rgba(22, 197, 94, 0.35); font-size: 16px; }
.crossword-new-big:hover { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.crossword-new-big .crossword-new-arrow { animation: cw-arrow 1s ease-in-out infinite; }
@keyframes cw-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* Модалка завершения */
.crossword-done-overlay { position: fixed; inset: 0; z-index: 1060; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.5); }
.crossword-done-overlay.is-open { display: flex; }
.crossword-done-card { width: min(420px, 100%); padding: 24px 24px 20px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25); animation: cw-pop .25s ease-out; }
@keyframes cw-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.crossword-done-lottie { min-height: 200px; display: flex; align-items: center; justify-content: center; }
.crossword-done-title { margin: 6px 0 6px; color: #0f172a; font-size: 1.5rem; font-weight: 700; }
.crossword-done-text { margin: 0 0 16px; color: #475569; font-size: 15px; }
.crossword-done-close { display: block; width: 100%; margin-top: 10px; padding: 8px; border: 0; background: transparent; color: #64748b; font-size: 14px; font-weight: 600; cursor: pointer; }
.crossword-done-close:hover { color: #0f172a; }

/* Последние кроссворды */
.crossword-recent { max-width: 720px; margin: 36px auto 0; }
.crossword-recent-title { margin: 0 0 10px; color: #0f172a; font-size: 18px; }
.crossword-recent-list { margin: 0 0 22px; padding: 0; list-style: none; }
.crossword-recent-item { margin-bottom: 8px; }
.crossword-recent-item a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 10px; color: #334155; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.crossword-recent-item a:hover { border-color: #0e7490; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
.crossword-recent-number { font-weight: 700; color: #0f172a; }
.crossword-recent-label { flex: 1; color: #64748b; font-size: 14px; }
.crossword-recent-cta { color: #0e7490; font-weight: 700; font-size: 14px; white-space: nowrap; }
.crossword-recent-done { color: #16a34a; }
.crossword-recent-fav { color: #f59e0b; }
.crossword-recent-item--unfinished a { background: #f0fdfa; border-color: #99f6e4; }

/* Мобильная версия: убрать верхнее меню сайта, email-баннер и строку параметров */
@media (max-width: 991.98px) {
    #main-menu { display: none !important; }
    .email_banner { display: none !important; }
    .crossword-params { display: none !important; }
    .crossword-workspace-header { margin: 0; }
    .crossword-breadcrumb { padding-bottom: 4px; }
}

/* ===== Лендинг /crossword/ — редизайн (компактная шапка + яркая CTA) ===== */
.crossword-landing { max-width: 600px; margin: 0 auto; }
.crossword-landing-head { text-align: center; margin: 14px 0 18px; }
.crossword-landing-head h1 { margin: 0 0 6px; color: #0f172a; font-size: clamp(1.35rem, 3.2vw, 1.8rem); line-height: 1.2; }
.crossword-landing-emoji { font-size: 1.1em; }
.crossword-landing-sub { margin: 0 auto; max-width: 520px; color: #64748b; font-size: 14px; }

/* Карточка старта — пастельная, тёплая, не "грустная" */
.crossword-start { max-width: 560px; margin: 0 auto; padding: 22px; border: 1px solid #cdeef0; border-radius: 16px; text-align: center; background: linear-gradient(160deg, #ecfeff 0%, #f0fdf4 100%); box-shadow: 0 6px 20px rgba(14, 116, 144, 0.10); }

.crossword-random-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; border: 0; border-radius: 999px; color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%); box-shadow: 0 6px 16px rgba(14, 116, 144, 0.30); transition: transform .1s, box-shadow .15s; }
.crossword-random-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(14, 116, 144, 0.38); }
.crossword-random-btn:active { transform: translateY(0); }

.crossword-start-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: #94a3b8; font-size: 13px; }
.crossword-start-or::before, .crossword-start-or::after { content: ''; flex: 1; height: 1px; background: #d7e6e8; }

.crossword-start-go { margin-top: 14px; }

.crossword-recent { margin-top: 26px; }