body, html {
    margin: 0; padding: 0; height: 100%;
    font-family: sans-serif; background-color: #f4f4f4;
}
#game-container { 
    display: flex; flex-direction: column; height: 100vh; overflow: hidden; 
}
#scene-wrapper {
    flex: 1; overflow: auto; position: relative; cursor: crosshair;
}

/* New inner wrapper ensures absolute elements align to the image */
#scene-inner {
    position: relative; display: block; width: 100%; min-width: 1920px;
}
#scene-image {
    display: block; width: 100%;
}
#scene-items-container, #highlights-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Allows clicks to pass through to the image hit detector */
}

/* Bottom UI Layout */
#ui-bottom {
    background: #fff; border-top: 2px solid #ccc;
    padding: 15px 20px; display: flex; flex-direction: column;
    flex-shrink: 0;
}
.stats-row {
    display: flex; align-items: center; gap: 15px; margin-bottom: 15px; flex-wrap: wrap;
}
.stat-badge {
    font-size: 16px; font-weight: bold; background: #eee;
    padding: 8px 12px; border-radius: 4px;
}
.sub-text { color: #666; font-weight: normal; }

/* Scrollable Item Box */
#find-list { 
    list-style: none; padding: 0; margin: 0; display: flex; overflow-x: auto; gap: 20px; padding-bottom: 10px;
}
#find-list li {
    display: flex; align-items: center; gap: 10px; font-size: 16px; 
    transition: opacity 0.3s, color 0.3s; min-width: max-content; 
    border-right: 1px solid #eee; padding-right: 20px;
}
#find-list li.found { 
    text-decoration: line-through; color: #aaa; opacity: 0.5;
}
.find-thumb {
    width: 50px; height: 50px; object-fit: contain; background-color: #fff; 
    border: 1px solid #ddd; border-radius: 4px; padding: 2px; flex-shrink: 0;
}

button { 
    padding: 8px 16px; font-size: 14px; cursor: pointer; background: #333; color: #fff; border: none; border-radius: 4px; 
}
button:hover { background: #555; }
#dev-panel { padding: 10px; background: #fee; border: 1px solid #fcc; font-size: 12px; margin-bottom: 10px; }

/* Overlays & Highlights */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 1000;
}
.overlay.active { display: flex; }
.modal { background: white; padding: 40px; border-radius: 8px; text-align: center; display: flex; flex-direction: column; gap: 15px; }
.error { color: red; font-size: 14px; }

.hitbox-outline { position: absolute; border: 2px solid red; pointer-events: none; }
.hint-pulse {
    position: absolute; border: 3px solid #ffaa00; border-radius: 50%; pointer-events: none;
    animation: pulse 1s infinite;
}
.found-ring {
    position: absolute; border: 4px solid #4caf50; border-radius: 50%; pointer-events: none;
    animation: expandFade 1s forwards;
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}
@keyframes expandFade {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}