/* Guideline Styles */
.guide-overlay {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left 0.1s ease-out; /* Smooth column switching */
    width: 30px; /* Reference width for centering */
}

.guide-pin {
    color: #FF5252;
    font-size: 2rem;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
    margin-bottom: 0;
    height: 35px; /* Fixed height for calculation */
    display: flex; align-items: flex-end; justify-content: center;
    animation: bouncePin 0.5s infinite alternate;
}

.guide-line {
    width: 6px; /* Thicker as per screenshot */
    background-image: linear-gradient(to bottom, #fff 60%, transparent 40%);
    background-size: 6px 20px; /* Dotted pattern */
    background-repeat: repeat-y;
    opacity: 0.9;
}

@keyframes bouncePin {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

/* Ensure Board Wrapper is relative for absolute positioning of guide */
.grid-container {
    position: relative; 
}