/* ── Secret Code Worksheet ── */

/* Clip preview at A4 page boundary */
#puzzle-preview {
    overflow: hidden !important;
}



/* Center all option-groups in this page */
.options .option-group {
    display: block !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: center;
}
.options .option-group h2 {
    text-align: center;
    margin-bottom: 0.8rem;
}
.options .case-options {
    justify-content: center;
}

/* Pages control */
.pages-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}
.pages-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pages-btn:hover { background: #f0f0f0; }
#pages-display {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Multi-page print */
.sc-print-page {
    width: 210mm;
    height: 297mm;
    padding: 20mm;
    box-sizing: border-box;
    page-break-before: always;
    position: relative;
}



/* Title hide — overrides generator.css print display:block !important */
#puzzle-preview .puzzle-title.sc-hidden {
    display: none !important;
}

/* ── Font size variants ── */
.sc-fs-small  .sc-encoded { font-size: 9pt; }
.sc-fs-medium .sc-encoded { font-size: 13pt; }
.sc-fs-large  .sc-encoded { font-size: 17pt; }

.sc-fs-small  .sc-answer-line { min-height: 6mm; }
.sc-fs-large  .sc-answer-line { min-height: 10mm; }

/* ── 2-column layout ── */
.sc-problems.sc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm 8mm;
}

/* ── Word length warning in word count area ── */
.sc-warn      { color: #e74c3c; font-size: 0.85rem; }
.sc-warn-word { color: #e74c3c; font-weight: 600; font-size: 0.85rem; }



/* Problems area */
.sc-problems {
    margin: 4mm 0 6mm;
    display: flex;
    flex-direction: column;
    gap: 5mm;
}

.sc-problem {
    display: flex;
    flex-direction: column;
    gap: 1.5mm;
}

.sc-problem-top {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.sc-num {
    font-size: 10pt;
    font-weight: 600;
    color: #555;
    min-width: 18px;
    flex-shrink: 0;
}

.sc-encoded {
    font-size: 13pt;
    letter-spacing: 1px;
    color: #222;
    line-height: 1.3;
}

/* Answer line */
.sc-answer-line {
    border-bottom: 1.5px solid #333;
    min-height: 8mm;
    margin-left: 22px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 1mm;
}

.sc-answer-text {
    font-size: 10pt;
    color: #c0392b;
    font-weight: 600;
    letter-spacing: 2px;
}

/* ── Cipher Key Box ── */
.sc-key-box {
    margin-top: auto;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    padding: 4mm 5mm;
    background: #fafafa;
}

.sc-key-title {
    font-size: 9pt;
    font-weight: 700;
    color: #555;
    margin-bottom: 3mm;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sc-key-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 2mm 1mm;
}

.sc-key-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5mm;
}

.sc-key-letter {
    font-size: 8pt;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.sc-key-eq {
    font-size: 6pt;
    color: #aaa;
    line-height: 1;
}

.sc-key-sym {
    font-size: 11pt;
    color: #222;
    line-height: 1;
}

/* ── Print ── */
@media print {
    #sc-extra-pages { display: block; }

    /* Large font: hide cipher key from preview (page 1); it goes on its own page */
    body.sc-key-separate #puzzle-preview .sc-key-box { display: none !important; }

    .sc-print-page {
        width: 210mm !important;
        height: 297mm !important;
        padding: 20mm !important;
        box-sizing: border-box !important;
        page-break-before: always !important;
        position: relative !important;
        background: white !important;
    }

    #puzzle-preview .puzzle-title.sc-hidden {
        display: none !important;
    }

    .sc-fs-small  .sc-encoded { font-size: 9pt !important; }
    .sc-fs-medium .sc-encoded { font-size: 13pt !important; }
    .sc-fs-large  .sc-encoded { font-size: 17pt !important; }

    .sc-problems.sc-two-col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4mm 8mm !important;
    }

    .sc-problems {
        margin: 4mm 0 6mm !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5mm !important;
    }

    .sc-problem-top {
        display: flex !important;
        align-items: baseline !important;
        gap: 4px !important;
    }

    .sc-num { font-size: 10pt !important; font-weight: 600 !important; }
    .sc-encoded { font-size: 13pt !important; }

    .sc-answer-line {
        border-bottom: 1.5px solid #333 !important;
        min-height: 8mm !important;
        margin-left: 22px !important;
    }

    .sc-answer-text {
        font-size: 10pt !important;
        color: #c0392b !important;
        font-weight: 600 !important;
        letter-spacing: 2px !important;
    }

    .sc-key-box {
        border: 1.5px solid #ddd !important;
        border-radius: 6px !important;
        padding: 4mm 5mm !important;
        background: #fafafa !important;
    }

    .sc-key-title {
        font-size: 9pt !important;
        font-weight: 700 !important;
        margin-bottom: 3mm !important;
    }

    .sc-key-grid {
        display: grid !important;
        grid-template-columns: repeat(13, 1fr) !important;
        gap: 2mm 1mm !important;
    }

    .sc-key-pair { display: flex !important; flex-direction: column !important; align-items: center !important; }
    .sc-key-letter { font-size: 8pt !important; font-weight: 700 !important; }
    .sc-key-sym { font-size: 11pt !important; }
}