body{
    margin:0;
    background:#000;
    min-height:100vh;
    font-family:Arial, sans-serif;
}

.layout{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:40px;
    padding-top:20px;
}

/* Arcade cabinet container */
.arcade-wrapper{
    position:relative;
    width:650px;
    max-width:95vw;
}

/* Arcade machine image */
.arcade-image{
    width:100%;
    display:block;
}

/* Screen area */
.screen{
    position:absolute;
    top:26%;
    left:19%;
    width:62%;
    height:40%;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

/* Game iframe */
.screen iframe{
    width:420px;
    height:450px;
    border:none;
    transform:translateY(-60px) scale(0.55);
    transform-origin:center center;
}

/* RESET button overlay - invisible but clickable */
.reset-button{
    position:absolute;
    bottom:20.8%;
    left:37.5%;
    width:8%;
    height:4.5%;
    cursor:pointer;
    display:block;
    background:transparent;
    z-index:10;
}


/* Side panels */
.side-panel{
    width:220px;
    display:flex;
    flex-direction:column;
    gap:25px;
    margin-top:0px;
}

/* Cyberpunk boxes */
.cyber-box{
    padding:18px;
    border:2px solid #00ffff;
    background:rgba(0,0,0,0.65);
    color:#00ffff;
    text-align:center;
    box-shadow:
        0 0 6px #00ffff,
        0 0 14px #ff00ff inset;
    clip-path:polygon(
        0 0,
        92% 0,
        100% 12%,
        100% 100%,
        8% 100%,
        0 88%
    );
}

.cyber-box h2{
    margin:0 0 10px 0;
    color:#ff00ff;
    font-size:18px;
    letter-spacing:2px;
}

.cyber-box p{
    margin:0;
    font-size:20px;
}

.cyber-box p.small-text{
    font-size:12px;
}

.site-logo{
    width:90%;
    max-width:260px;
    margin-bottom:-50px;
}

.site-mascot{
    position:absolute;
    top:55%;
    right:-45%;
    width:85%;
    max-width:800px;
    transform:translateY(-50%);
    z-index:50;
}

.small-text{
    font-size:12px;
    line-height:1.4;
    opacity:0.75;
}