/* Production overlay — glass blur cover */
#prod-overlay {
    position: fixed;
    inset: 0;
    z-index: 200001;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px) saturate(0.6);
    -webkit-backdrop-filter: blur(12px) saturate(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

#prod-overlay .prod-overlay__scene {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

#prod-overlay .prod-overlay__worker-wrap {
    position: relative;
}

/* Reuses .game-tooltip visual style: wood border, cream bg, downward diamond arrow */
#prod-overlay .prod-overlay__label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    width: max-content;
    max-width: 260px;
    padding: 8px 12px;
    border: 4px solid var(--wood-dark);
    border-radius: 7px;
    background: var(--cream);
    box-shadow: inset 0 0 0 2px #fff9dc, 0 5px 0 rgba(64, 35, 20, 0.38);
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--wood-dark);
    text-align: center;
    white-space: normal;
    word-break: break-word;
    user-select: none;
    pointer-events: none;
}

/* Downward-pointing diamond arrow — same technique as .game-tooltip::after */
#prod-overlay .prod-overlay__label::after {
    position: absolute;
    bottom: -14px;
    left: calc(50% - 9px);
    width: 14px;
    height: 14px;
    border-right: 4px solid var(--wood-dark);
    border-bottom: 4px solid var(--wood-dark);
    content: "";
    background: var(--cream);
    transform: rotate(45deg);
}

/* Worker: construction-atlas.png, cells 256×208, displayed at 0.5x → 128×104 */
/* Atlas bg-size at 0.5x: 896×520 */
#prod-overlay .prod-overlay__worker {
    width: 128px;
    height: 104px;
    background-image: url('/api/sprites/construction-atlas.png');
    background-size: 896px 520px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-position: 0 0;
    flex-shrink: 0;
    margin-right: -32px;
}

/* House: piggy-house-build.png is 1024×208 split into 4 equal panels (256×208 each) */
/* Using 2nd panel (index 1): source x=256. Displayed at 0.75x → 192×156 */
/* bg-size: 768px 156px; bg-position: -192px 0 */
#prod-overlay .prod-overlay__house {
    width: 192px;
    height: 156px;
    background-image: url('/api/sprites/piggy-house-build.png');
    background-size: 768px 156px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-position: -192px 0;
    flex-shrink: 0;
    filter:
        drop-shadow(0 0 5px rgba(120, 200, 255, 0.9))
        drop-shadow(0 0 14px rgba(80, 160, 255, 0.5));
}