#focushint {
    font-size: 2rem;
}

.container {
    all:unset !important;
    display: flex;
}

.big-holder {
    all:unset !important;
    position: relative;
    width: 75%; /* Allow it to resize based on parent/container */
    height: calc(75% * 10 / 16); /* Maintain 16:10 aspect ratio */
}

#screen {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1; /* Make the canvas visible */
    image-rendering: pixelated; /* Keep pixels sharp when scaled */
}

#gradientScreen {
    display: none; /* This is no longer used for rendering */
}

/* Media query for screen width less than 700px */
@media (max-width: 1024px) {
    .big-holder {
        width: 94vw; /* 90% of viewport width */
        height: calc(94vw * 10 / 16); /* Maintain 16:10 aspect ratio */
    }
}

.controls {
    all:unset !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -2.5rem;
    flex-wrap: wrap;
    gap: 1vw;
    user-select: none;
}

.left-controls {
    all:unset !important;
    display: flex;
    gap: 1vw;
    flex-wrap: wrap;
}

.arrow-controls {
    all:unset !important;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-top: -1rem
}

.arrow-row {
    all:unset !important;
    display: flex;
    justify-content: center;
    gap: 1vw;
}


.controls button {
    all:unset !important;
    min-width: 10vw;
    min-height: 10vw;
    font-weight: bold;
    border: none;
    border-radius: 3vw;
    color: #fff;
    background-color: #550000; /* DOOM-like red */
    box-shadow: 0 0 5px #000;
    transition: background-color 0.2s ease;
}

.controls button:hover {
    background-color: #aa0000;
    cursor: pointer;
}

.controls button:active {
    background-color: #770000;
}