.eluosidivfangkuai{
    padding: 1rem;
    background: #222;
    border-radius: 6px;
    border: 1px solid #444;
    background-image: repeating-linear-gradient(45deg, rgb(15 14 11 / 8%) 0px, rgb(77 67 42 / 8%) 2px, transparent 2px, transparent 8px);
}

.fullgames{
    display: flex;
    justify-content: center;
    align-items: center;
}

.gameboy {
    border-radius: 6px;
    padding: 0.75rem;
    position: relative;
    border: 2px solid #0a0a0a;
    width: 100%;
    max-width: 17rem;
    background: #1a1a1a;
}

.screen-frame {
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: center;
}

.lcd-canvas {
    display: block;
    box-shadow: 0 0 0 2px #3a3a3a, inset 0 0 0 2px #1a2a1a;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    cursor: pointer;
    width: 100%;
    background: #2e2a24;
    border: 4px solid #000;
    padding: 4px;
    border-radius: 6px;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.action-buttons{
    display: flex;
    align-items: center;
    justify-content: center;
}

.dpad {
    position: relative;
    width: 6rem;
    height: 6rem;
}

.dpad-btn {
    position: absolute;
    background: #1f1f1f;
    border-radius: 8px;
    box-shadow: -1px 2px 0 #000;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    font-size: 26px;
    font-weight: bold;
    color: #ecdca9;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    background: #2c2c2c;
    border: 1px solid #444;
    text-shadow: 0 1px 0 #000;
    transition: all 0.03s linear;
}

.dpad-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #000;
    background: #3a3a3a;
}

.dpad-up { 
    top: 0; 
    left: 2rem;
}

.dpad-down {
    bottom: 0; 
    left: 2rem;
}
.dpad-down span{
    transform: rotate(180deg);
}

.dpad-left { 
    top: 2rem; 
    left: 0; 
}
.dpad-left span{
    transform: rotate(270deg);
}

.dpad-right { 
    top: 2rem; 
    right: 0; 
}
.dpad-right span{
    transform: rotate(90deg);
}

.circle-btn {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, #3a3a3a, #111);
    border-radius: 100%;
    box-shadow: 0px 2px 0 #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #ead9a7;
    text-shadow: 0px 0px 1px black;
    transition: 0.04s linear;
    cursor: pointer;
    user-select: none;
    background: radial-gradient(circle at 30% 30%, #6a4a2a, #221100);
}

.circle-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #000;
}

.func-buttons {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 0.75rem;
}

.func-btn {
    background: #1f1f1f;
    border-radius: 3px;
    padding: 3px 4px;
    font-size: 12px;
    color: #f7e5b1;
    text-align: center;
    box-shadow: 0px 1px 0 #000000;
    cursor: pointer;
    transition: 0.04s linear;
    letter-spacing: 1px;
    background-color: #444;
}
.func-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #000;
}

@media screen and (max-width: 400px){
    .gameboy{
        max-width: 400px;
        padding: 0.5rem;
    }
    .eluosidivfangkuai{
        padding: 0;
    }
}

@media screen and (max-width: 330px){
    .func-buttons{
        margin-bottom: 0.75rem;
        gap: 3px;
    }
    .func-btn{
        font-size: 0.5rem;
    }
}

@media screen and (max-width: 305px){
    #audioToggleBtn{
        display: none;
    }
}