/* ==========================================================================
   MODERN CROSSWORD STYLES (Duolingo & Kahoot Inspired)
   ========================================================================== */

/* Global Body Styling */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #f0f4ff 0%, #e6eefa 100%); /* Soft, playful background */
    color: #2d3748;
    margin: 0;
    padding: 40px 20px;
    text-align: center;
    min-height: 100vh;
}

/* Friendly Subtitle / Header */
h3 {
    color: #4a90e2; /* Vibrant friendly blue */
    font-size: 26px;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

/* ==========================================================================
   CROSSWORD GRID STRUCTURE
   ========================================================================== */
.crossword-container {
    display: inline-block;
    background: #ffffff;
    padding: 25px;
    border-radius: 24px; /* Big rounded corners for the game board */
    box-shadow: 0 10px 30px rgba(74, 144, 226, 0.12);
    border: 3px solid #e1e8f5;
    margin-bottom: 30px;
}

/* Rows holding the puzzle rows */
.row {
    display: flex;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   CELL WRAPPER & NUMBERS
   ========================================================================== */
.cell-wrapper {
    position: relative;
    width: 46px; /* Slightly adjusted to accommodate 3D border spacing */
    height: 46px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 46px;
}

/* Small question numbers inside cells */
.cell-number {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8; /* Discrete but readable gray */
    pointer-events: none;
    z-index: 2;
}

/* ==========================================================================
   INPUT CELL DESIGN (THE SQUARES)
   ========================================================================== */
.cell {
    display: block;
    width: 41px;
    height: 41px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #ffffff;
    color: #334155;
    
    /* 3D Button style for each tile */
    border: 2px solid #e2e8f0;
    border-bottom: 4px solid #cbd5e1;
    border-radius: 8px; /* Smooth square corners */
    outline: none;
    transition: all 0.15s ease;
}

/* Interaction when a student clicks into a letter square */
.cell:focus {
    border-color: #3b82f6;
    border-bottom-color: #1d4ed8;
    background-color: #f0f7ff; /* Soft blue inner glow */
    transform: translateY(-1px);
}

/* Completely empty grid spaces (Transparent background) */
.cell-wrapper.empty {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    background-color: transparent;
    border: none;
    pointer-events: none;
}

/* ==========================================================================
   SPECIAL STATES (KEYWORD, CORRECT, INCORRECT)
   ========================================================================== */

/* Main column / central puzzle word */
.cell.keyword {
    background-color: #fffbeb; /* Warm bright yellow */
    border-color: #fde047;
    border-bottom-color: #eab308;
    color: #9a3412;
}

/* Correctly guessed letter */
.correct {
    background-color: #dcfce7 !important; /* Soft pastel green */
    border-color: #22c55e !important;
    border-bottom-color: #16a34a !important;
    color: #15803d !important;
}

/* Wrongly guessed letter */
.incorrect {
    background-color: #fee2e2 !important; /* Soft pastel red */
    border-color: #ef4444 !important;
    border-bottom-color: #b91c1c !important;
    color: #b91c1c !important;
}

/* ==========================================================================
   CLUES BOX & BACK LINKS
   ========================================================================== */

/* Container for definitions and quiz questions */
.clues {
    text-align: left;
    display: inline-block;
    max-width: 600px;
    margin-top: 10px;
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* The return / navigation link */
a.back-link {
    display: inline-block;
    margin-top: 25px;
    text-decoration: none;
    color: #4a90e2;
    font-weight: 700;
    font-size: 15px;
    transition: color 0.2s ease;
}

a.back-link:hover {
    color: #2563eb;
    text-decoration: underline;
}