/* Styling for Page 25 */
#page_25 .labeling-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

#page_25 .image-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    border: 3px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}

#page_25 .image-wrapper img {
    width: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

#page_25 .word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed #bbb;
    min-height: 50px;
    width: 90%;
}

#page_25 .draggable-label {
    background: #fff;
    border: 2px solid #0078d7;
    color: #333;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: grab;
    font-size: 11px;
    font-weight: bold;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 20;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
}

#page_25 .draggable-label:active {
    cursor: grabbing;
}

#page_25 .draggable-label.correct {
    background-color: #d4f8d4;
    border-color: #2ecc71;
    color: #0a8a0a;
}

#page_25 .draggable-label.wrong {
    background-color: #ffe1e1;
    border-color: #e74c3c;
    color: #c0392b;
}

/* Drop Zones Overlay */
#page_25 .drop-zone {
    position: absolute;
    border: 2px dashed #ffeb3b; /* Visible yellow dashed border */
    background: rgba(0, 0, 0, 0.1); /* Slight dark background for contrast */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: transparent;
    transition: background 0.3s, border-color 0.3s;
    /* Size for the target box - minimal footprint */
    width: 70px; 
    height: 30px;
    transform: translate(-50%, -50%); /* Center on coordinate */
    z-index: 10;
}

#page_25 .drop-zone.hovered {
    background: rgba(255, 235, 59, 0.3);
    border-color: #ffeb3b;
}

#page_25 .drop-zone.filled {
    border: none;
    background: transparent;
}

/* Specific Positions (Percentages for responsiveness) */
/* Window: Top Right */
#page_25 .zone-window { top: 30%; left: 75%; }

/* Pillow: On the bed head */
#page_25 .zone-pillow { top: 48%; left: 25%; }

/* Bolster: Middle of bed */
#page_25 .zone-bolster { top: 55%; left: 40%; }

/* Bed: Bottom Left Frame */
#page_25 .zone-bed { top: 75%; left: 25%; }

/* Blanket: Lower bed */
#page_25 .zone-blanket { top: 65%; left: 60%; }

/* Mat: Floor bottom right */
#page_25 .zone-mat { top: 85%; left: 70%; }

/* Controls */
#page_25 .controls-p25 {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#page_25 button {
    padding: 8px 16px;
    background-color: #0078d7;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

#page_25 button:hover {
    background-color: #005fa3;
}

#page_25 button.reset-btn {
    background-color: #e74c3c;
}

#page_25 button.reset-btn:hover {
    background-color: #c0392b;
}

#page_25 .feedback {
    margin-top: 10px;
    font-weight: bold;
    min-height: 20px;
    text-align: center;
}