/* Additional CSS for Word Scramble specific elements */
/* (c) Copyright 2025 Knowledge Share LLC.  All Rights Reserved. */
/* last updated 9/16/2025 */
         
        .custom-puzzle-title {
            font-size: 18px;
            font-weight: bold;
            color: #666;
            font-style: italic;
            display: block;
            margin-top: 5px;
            border: none;
        }
        
        .intro-text {
            background: white; 
            padding: 20px;
        }
        
        /* Input Mode Toggle */
        .input-options {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .input-options button {
            padding: 10px 20px;
            border: 2px solid #3498db;
            background: white;
            color: #3498db;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .input-options button.active,
        .input-options button:hover {
            background: #3498db;
            color: white;
        }

        /* Bulk Input Styles */
        .bulk-input-section {
            margin-top: 10px;
        }

        .bulk-input-section label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #2c3e50;
        }

        #bulk-words {
            width: 100%;
            min-height: 120px;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-family: monospace;
            font-size: 14px;
            resize: vertical;
            margin-bottom: 5px;
        }

        #bulk-words:focus {
            outline: none;
            border-color: #3498db;
        }

        .bulk-help {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
            font-style: italic;
        }

        #import-bulk-btn {
            background: #27ae60;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }

        #import-bulk-btn:hover {
            background: #229954;
        }

        /* Copy input to clipboard button */
        .copy-link {
            font-size: 12px;
            margin-left: 8px;
            color: #3498db;
            cursor: pointer;
            font-weight: normal;
        }

        .copy-link:hover {
            color: #2980b9;
            text-decoration: underline;
        }

        /* Section visibility control */
        .word-input-section {
            display: block; /* Default visible state */
        }

        .bulk-input-section {
            display: none; /* Default hidden state */
        }

        .scramble-section {
            display: none; /* Default hidden state */
        }



        /* Scramble Display Styles */
        .scramble-container {
           /* max-width: 800px; */
            margin: 0 auto;
            padding: 20px 0;
            background-color: white;
        }

        .scramble-container h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .instructions {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-style: italic;
        }

        .scramble-list {
            display: grid;
            gap: 20px;
  /*          max-width: 600px; */
            max-width: 95%;
            margin: 0 auto;
        }

        .scramble-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 8px;
            min-height: 60px;
        }

        .scramble-number {
            font-weight: bold;
            font-size: 18px;
            color: #3498db;
            min-width: 30px;
        }

        .scramble-content {
            flex: 1;
        }

        .scrambled-word {
            font-family: 'Courier New', monospace;
            font-size: 22px;
            font-weight: bold;
            color: #2c3e50;
            letter-spacing: 3px;
            margin-bottom: 8px;
        }

/*
        .answer-word {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            font-weight: bold;
            color: #27ae60;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }
*/
        .word-clue {
            font-style: italic;
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .answer-line-container {
            display: flex;
            align-items: center;
            min-width: 200px;
        }

        .answer-line {
            border-bottom: 2px solid #333;
            width: 200px;
            height: 20px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* When showing answers, display the answer text on the line */
        .answer-line.with-answer {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            font-weight: bold;
            color: #27ae60;
            letter-spacing: 1px;
            border-bottom: 2px solid #27ae60; /* Different color to show it's filled */
        }

/* Remove the old answer-word styling since we're not using it anymore 
        .answer-word {
            display: none; /* This class shouldn't be used anymore */
        }
*/

/* Show answers when in answer view 
        .scramble-section.show-answers .answer-word {
            display: block !important;
        }
*/
        /* Message Styles */
        .error-message, .success-message, .warning-message {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }

        .error-message {
            background: #fee;
            border: 1px solid #fcc;
            color: #c33;
        }

        .success-message {
            background: #efe;
            border: 1px solid #cfc;
            color: #3c3;
        }

        .warning-message {
            background: #ffc;
            border: 1px solid #ffb;
            color: #cc3;
        }

        .status {
            text-align: left;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }

        .status.success {
            background: #d5edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }


        /* Initially hidden elements */
            #copy-list-btn,
            #toggle-answers-btn,
            #print-puzzle-btn, 
            #print-answers-btn,
            #print-puzzle-id,
            #puzzle-id-display {
                display: none;
            }




        /* Print Styles - Single consolidated block */
        @media print {
            .no-print {
                display: none !important;
            }
            
            .main-content {
                border: 1px solid silver;
            }
            
            /* Answer visibility logic */
            .answer-line.with-answer {
                color: #000 !important;
                border-bottom-color: #333 !important;
            }
            
            /* Hide answers in puzzle mode */
            .scramble-section:not(.show-answers) .answer-line.with-answer {
                color: transparent !important;
                border-bottom-color: #333 !important;
            }
            
            /* Spacing optimizations */
            .scramble-container {
                padding: 10px 0 0 0; /* top padding only, no bottom */
                margin: 0;
            }
            
            .scramble-list {
                gap: 2px; /* reduced from 12px */
                margin: 0 auto;
            }
            
            .scramble-item {
                padding: 3px 8px; /* reduced from 6px 12px */
                min-height: auto; /* reduced from 38px */
                margin-bottom: 8px;
                gap: 12px; /* reduced from 15px */
                page-break-inside: avoid;
            }
            
            /* Font size optimizations */
            .scrambled-word {
                font-size: 12pt !important; /* force override */
                letter-spacing: 2px;
                margin-bottom: 0; /* reduced from 5px */
            }
            
            .word-clue {
                font-size: 10pt;
                margin-bottom: 5px;
                line-height: 1.2;
            }
            
            /* Answer line sizing  - keep widths the same here */
            .answer-line-container {
                min-width: 180px;
            }
            .answer-line {
                width: 180px;
                height: 18px;
            }
            
            .answer-line.with-answer {
                font-size: 15pt;
            }
            
            /* Other elements */
            .instructions {
                margin-bottom: 20px;
                font-size: 11pt;
            }
            
            .scramble-number {
                font-size: 12pt;
                min-width: 25px;
            }
            
.name-puzzle-date-row {
    display: flex;
    align-items: baseline;
    width: 100%;
    gap: 10px; /* Space between elements */
}

.name-field {
    width: 45%;
    border-bottom: 1px solid black;
    padding-bottom: 2px;
}

.print-puzzle-id {
    width: 20%;
    text-align: center;
    /* No border - just the text */
}

.date-field {
    width: 35%;
    border-bottom: 1px solid black;
    padding-bottom: 2px;
    text-align: right; /* Align "Date" to right of its field */
}


            .print-copyright {
                font-size: 0.75em;
                margin-top: 3px;
                line-height: 1.0;
            }

            body {
                font-size: 12pt;
                line-height: 1.4;
				margin: 0.4 !important;
            }
        }