body {
    margin: 0;
    padding: 0;
    font-family: monospace;
}

#cinema-lobby {
    width: 100vw;
    height: 100vh;
    background: url('images/cl.png') no-repeat center center fixed;
    background-size: cover;
    position: relative;
}

/* GLOBAL SEARCH (POSITIONED HALFWAY DOWN) */
#search-wrapper {
    position: absolute;
    left: 3%;
    top: 38%;                     /* Moves top edge to halfway down */
    transform: translateY(-50%);  /* Shifts it up by half its height to perfectly center it */
    width: 340px;
    padding: 15px;
    background: rgba(0,0,0,0.6);
    border: 3px solid #444;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.machine-title {
    font-size: 20px;
    white-space: nowrap;
    color: #0f0;
    margin: 0;
}

#general-search {
    width: 100%;
    max-width: 150px;
    padding: 6px;
    border: 2px solid #fff;
    border-radius: 5px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-family: monospace;
}

#general-search:focus {
    outline: none;
    border-color: #0f0; 
}

/* CINEMA SCREEN */
#screen-frame {
    position: absolute;
    right: 13%;
    top: 21%;
    width: 55%;
    height: 45%;
    pointer-events: none; 
	z-index: 1;
}

#frame-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#cinema-screen {
    position: absolute;
    top: 10%;      /* adjust to fit inside your frame */
    left: 8%;
    width: 84%;
    height: 78%;
    background: rgba(0,0,0,0.7);
    border: 3px solid #222;
    padding: 20px;
    color: #0f0;
    z-index: 5;
	pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    gap: 15px;
}

.result-image {
    width: 260px; /* This physically bumps up the baseline size from 180px */
    height: auto;
    border-radius: 6px;
    border: 2px solid #333;
    
    /* 1. This tells the browser to animate changes smoothly over 0.2 seconds */
    transition: transform 0.2s ease, border-color 0.2s ease; 
    
    /* 2. Forces the browser to render the hover effect smoothly without lag */
    will-change: transform; 
}

.result-image:hover {
    transform: scale(1.10); /* This expands it by 5% on hover */
    border-color: #0f0;    /* Changes border to neon green */
}