/* Reset basic margins so the app fills the screen */
body {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace; /* Cute typewriter font */
    height: 100vh; /* 100% of Viewport Height */
    display: flex;
    flex-direction: column; /* Stack controls on top, meadow in middle, pen at bottom */
    overflow: hidden; /* Prevents scrolling */
    
    /* --- THE FULL FIX --- */
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */
}

/* --- Top Control Panel --- */
.controls {
    background-color: #fcf6f5;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #e0e0e0;
    z-index: 10; /* Keeps this on top of the sheep */
}

h1 {
    font-size: 20px;
    color: #556b2f; /* Dark olive green */
    margin: 0;
}

button {
    background-color: #ffb7b2;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    color: white;
}

/* --- The Meadow (Middle Area) --- */
.meadow {
    background-color: #a3d9a5; /* Soft grass green */
    flex-grow: 1; /* Takes up all remaining space */
    position: relative; /* Needed so we can position sheep "absolute" inside it */
    cursor: crosshair; /* Just for fun */
}

/* --- The Pen (Bottom Area) --- */
.pen-area {
    background-color: #8da35c; /* Darker grass for the pen area */
    height: 150px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-top: 4px dashed #6b8c42; /* The "boundary" line */
}

.pen-fence {
    width: 80%;
    height: 80%;
    border: 4px solid #8b4513; /* Brown wood color */
    background-color: rgba(139, 69, 19, 0.1); /* See-through brown tint */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.pen-label {
    position: absolute;
    top: -15px;
    background-color: #8b4513;
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    font-size: 12px;
}

/* --- The Sheep --- */
/* --- The Sheep Container --- */
.sheep {
    position: absolute;
    width: 80px;  /* Adjust this if your drawing looks too small/big */
    height: auto;
    cursor: grab;
    
    /* Animation affects the whole container */
    animation: bounce 3s infinite ease-in-out;
    transition: transform 0.2s;
    z-index: 5; /* Ensures sheep sits above the grass */
}

/* This handles the actual image inside the container */
.sheep img {
    width: 100%;       /* Fills the container width */
    display: block;    /* Removes weird gaps below images */
    
    /* IMPORTANT: This stops the browser's default "ghost image" drag 
       so our custom drag code will work smoothly later */
    pointer-events: none; 
}

.sheep:active {
    cursor: grabbing;
    transform: scale(1.1);
    z-index: 100; /* Pop to the very front when holding */
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* --- The Speech Bubble --- */
.bubble {
    position: absolute;
    bottom: 100%; /* Positions it right above the sheep's head */
    left: 50%;
    transform: translateX(-50%); /* Centers it perfectly horizontally */
    
    background-color: white;
    border: 2px solid #555;
    border-radius: 10px;
    padding: 5px 10px;
    min-width: 80px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    
    /* Make it float on top of everything */
    z-index: 20; 
    
    /* Start hidden */
    display: none; 
    
    /* Cute shadow */
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

/* A little triangle pointer at the bottom of the bubble */
.bubble::after {
    content: '';
    position: absolute;
    top: 100%; /* Right at the bottom of the bubble */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.flower {
    position: absolute;
    font-size: 24px; /* Size of the flower emoji */
    pointer-events: none; /* Mouse ignores them (so you don't accidentally click a flower instead of a sheep) */
    opacity: 0.8;
    z-index: 0; /* Keep them flat on the grass */
}

/* --- The Custom Popup --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); /* Dim background */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-box {
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 4px solid #FFB7B2;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-box input {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    width: 200px;
    margin: 15px 0;
    font-family: inherit;
}

.modal-buttons { display: flex; gap: 10px; justify-content: center; }

.confirm-btn { background-color: #B5EAD7; color: #556b2f; }
.cancel-btn { background-color: #ffb7b2; color: white; }

/* Allow text selection ONLY inside the input box so you can edit your tasks */
input {
    user-select: text;
    -webkit-user-select: text;
}