/* css/drag-drop-game.css */

/* --- Base Wrapper --- */
.drag-drop-long-text-game-instance { /* Renamed */
    padding: 20px;
    margin: 25px 0;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f9f9f9;
    color: #333;
    font-family: sans-serif;
    box-sizing: border-box;
}

/* --- Title --- */
.drag-drop-long-text-game-instance h3.game-title { /* Updated wrapper class */
    color: #333;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.6em;
    text-shadow: none;
}

/* --- Word Bank --- */
.drag-drop-long-text-game-instance .word-bank-container { /* Updated wrapper class */
    background-color: #f0f0f0;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-align: center;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    position: sticky;
    top: 10px;
    z-index: 100;
}

/* This ensures that no parent element interferes with the sticky positioning */
.ddg-sticky-parent {
    overflow: visible !important;
}

.drag-drop-long-text-game-instance .word-bank-title { /* Updated wrapper class */
    font-weight: bold;
    margin-bottom: 8px;
    color: #555;
    display: block;
    font-size: 0.9em;
    padding: 0 5px;
}

.drag-drop-long-text-game-instance .word-bank { /* Updated wrapper class */
     min-height: 40px;
     position: relative; /* Crucial for positioning used words */
     padding-bottom: 5px;
}

/* --- Draggable Words --- */
.drag-drop-long-text-game-instance .draggable-word { /* Updated wrapper class */
    display: inline-block;
    background: #800080; /* Purple theme */
    border: none;
    color: white !important;
    text-decoration: none;
    padding: 5px 12px;
    font-size: 0.9em;
    font-weight: bold;
    margin: 4px;
    border-radius: 5px;
    cursor: grab;
    user-select: none; /* Prevent text selection during drag */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
    transform-origin: center center;
    transform: translate(0,0); /* Base transform */
    transition: background-color 0.2s ease, box-shadow 0.2s ease; /* Add transitions for hover */
}

.drag-drop-long-text-game-instance .draggable-word:hover { /* Updated wrapper class */
     background: #6a0dad; /* Darker purple on hover */
     box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.drag-drop-long-text-game-instance .draggable-word.dragging { /* Updated wrapper class */
    opacity: 0.6;
    cursor: grabbing;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: scale(1.05);
    transition: none !important; /* Turn off transition during drag */
    z-index: 999; /* Ensure it's above other elements */
}

.drag-drop-long-text-game-instance .draggable-word.used { /* Updated wrapper class */
    /* Hide words that have been successfully placed */
    position: absolute; /* Take out of flow for visual effect if needed */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: default;
    z-index: 1;
    transform: none; /* Reset any transform */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade out */
}

.drag-drop-long-text-game-instance .draggable-word.incorrect-flash { /* Updated wrapper class */
    /* Use a more generic animation name */
    animation: ddFailFlash 0.6s ease; /* Changed animation name */
}

.drag-drop-long-text-game-instance .draggable-word.selected {
    background-color: #6a0dad;
    box-shadow: 0 0 5px 2px rgba(106, 13, 173, 0.5);
    transform: scale(1.05);
}

/* --- Text Area & Gaps --- */
.drag-drop-long-text-game-instance .text-area { /* Updated wrapper class */
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
    line-height: 2.3; /* Increased line-height helps fit gaps */
    border: 1px solid #eee;
}

.drag-drop-long-text-game-instance .text-area p { /* Updated wrapper class */
    margin-bottom: 0; /* Remove default paragraph margin if needed */
}

.drag-drop-long-text-game-instance .gap { /* Updated wrapper class */
    display: inline-block; /* Allows gaps to sit within text flow */
    min-width: 90px;       /* Ensure minimum space for dropping */
    height: 30px;          /* Define height */
    line-height: 30px;     /* Vertically center text if any */
    padding: 5px 10px;      /* Inner spacing - increased for forgiveness */
    border-bottom: 1px solid #e0e0e0; /* Underline effect */
    background-color: #f8f8f8; /* Slight background to differentiate */
    margin: 0 4px;         /* Space around the gap */
    text-align: center;    /* Center text if filled */
    vertical-align: middle; /* Align with surrounding text */
    border-radius: 3px;    /* Slightly rounded corners */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

.drag-drop-long-text-game-instance .gap.drag-over { /* Updated wrapper class */
    /* Visual feedback when dragging over a potential drop target */
    background-color: #eeeeee; /* Lighter background */
    border-bottom: 1px dashed #800080; /* Purple dashed line */
}

.drag-drop-long-text-game-instance .gap.correct { /* Updated wrapper class */
    /* Style for a correctly filled gap */
    background-color: #e8f5e9; /* Light green background */
    border: 1px solid #a5d6a7; /* Green border */
    color: #2e7d32;           /* Dark green text */
    font-weight: bold;
    border-bottom: none;      /* Remove the underline */
    cursor: default;          /* No special cursor needed */
    pointer-events: none;     /* Prevent further interaction */
    font-size: 0.9em;         /* Match draggable word size */
    /* Ensure height/padding match empty gap for consistency */
    padding: 5px 10px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    animation: ddCorrectFlash 0.6s ease;
}

.drag-drop-long-text-game-instance .gap.incorrect-flash {
    animation: ddFailFlash 0.6s ease;
}

/* --- Feedback Area --- */
.drag-drop-long-text-game-instance .feedback-area { /* Updated wrapper class */
    margin-top: 15px;
    padding: 10px;
    min-height: 20px; /* Ensure space exists even when empty */
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
}

.drag-drop-long-text-game-instance .feedback-area.success {
    color: #2e7d32;
    background-color: #e8f5e9;
}

.drag-drop-long-text-game-instance .feedback-area.error {
    color: #c62828;
    background-color: #ffcdd2;
}


/* --- Check Button --- */
.drag-drop-long-text-game-instance .check-answers-button { /* Updated wrapper class */
    display: block; /* Make it a block element */
    margin: 20px auto 0; /* Center horizontally, add top margin */
    padding: 10px 20px;
    background-color: #800080; /* Purple */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.drag-drop-long-text-game-instance .check-answers-button:hover { /* Updated wrapper class */
    background-color: #6a0dad; /* Darker purple */
}

/* --- Animation --- */
@keyframes ddFailFlash {
    0%, 100% { background-color: #f8f8f8; }
    50% { background-color: #ffcdd2; }
}

@keyframes ddCorrectFlash {
    0%, 100% { background-color: #e8f5e9; }
    50% { background-color: #a5d6a7; }
}