.game-wrapper {
    position: relative;
    width: min(720px, 92vw, calc(92vh * 3 / 2));
    margin: 0 auto;
    line-height: 0;
}

.game-wrapper:fullscreen,
.game-wrapper:-webkit-full-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: black;
}

.game-wrapper:fullscreen canvas,
.game-wrapper:-webkit-full-screen canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: 1rem;
    pointer-events: none;
}

.overlay-banner {
    margin-top: 15%;
    max-width: 85%;
    max-height: 40%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.7));
    transform: translateY(-250%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease;
}

.overlay-banner.fullcover {
    margin-top: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

.overlay.show-banner .overlay-banner {
    transform: translateY(0);
    opacity: 1;
}

.overlay-buttons {
    position: absolute;
    bottom: 8%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5%;
    transform: translateY(250%);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease;
    pointer-events: none;
}

.overlay.show-buttons .overlay-buttons {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.overlay-btn {
    width: 35%;
    max-width: 190px;
    aspect-ratio: 587 / 136;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7FFFE0;
    border: 2px solid whitesmoke;
    border-radius: 0.6rem;
    cursor: pointer;
    font-family: 'rye', Arial, Helvetica, sans-serif;
    font-size: clamp(0.75rem, 4vw, 1.5rem);
    color: #531A82;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.85);
    transition: transform 0.15s ease;
}

.overlay-btn:hover {
    transform: scale(1.06);
}

.overlay-btn:active {
    transform: scale(0.95);
}

#game-controls {
    position: absolute;
    top: clamp(8px, 2.5vw, 16px);
    right: clamp(8px, 2.5vw, 16px);
    z-index: 4;
    display: flex;
    gap: clamp(6px, 2vw, 10px);
    line-height: normal;
}

.icon-btn {
    width: clamp(36px, 8vw, 60px);
    height: clamp(36px, 8vw, 60px);
    padding: clamp(4px, 1.5vw, 8px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(13, 157, 216, 0.55);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-btn:hover {
    transform: scale(1.08);
}

#pause-menu {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2.5vw, 18px);
    padding: 5%;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 1rem;
    pointer-events: none;
}

#pause-menu .menu-btn{
    pointer-events: auto;
}

canvas {
    display: none;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;

    background-color: black;
    border: 2px solid black;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.80),
                0 20px 40px rgba(0, 0, 0, 0.40);
}