/* =========================
   GLOBAL
========================= */

* {
  box-sizing:border-box;
}


body {

  margin:0;

  height:100vh;

  display:flex;

  justify-content:center;

  align-items:center;


  background:
  radial-gradient(circle at top,#1b1f3a,#05060a);


  font-family:
  Arial, Helvetica, sans-serif;


  color:white;

}



/* =========================
   CABINET
========================= */


.arcade-cabinet {


  width:min(900px,90vw);

  height:750px;


  position:relative;


  overflow:hidden;


  background:
  linear-gradient(#2a2a2a,#0f0f0f);


  border-radius:25px;



  display:flex;

  flex-direction:column;

  align-items:center;



  box-shadow:

  0 40px 120px rgba(0,0,0,.85),

  inset 0 0 0 4px #1c1c1c;


}



/* =========================
   MARQUEE
========================= */


.marquee {


height:70px;

width:100%;


background:

linear-gradient(
90deg,
#ff004c,
#ff3c00
);



display:flex;

align-items:center;

justify-content:center;



font-size:22px;

font-weight:bold;

letter-spacing:4px;



}



/* =========================
   NAVBAR
========================= */


.topnav {


display:flex;

justify-content:center;

align-items:center;


gap:28px;



width:100%;


padding:8px 0;



background:

linear-gradient(
#0b0b0b,
#050505
);



border-top:1px solid #222;

border-bottom:1px solid #111;



font-size:12px;

letter-spacing:2px;

text-transform:uppercase;



box-shadow:

inset 0 0 10px rgba(0,0,0,.8);



}



.topnav a {


color:#00e5ff;


text-decoration:none;



font-weight:bold;


padding:6px 10px;


opacity:.7;


transition:.2s;



}



.topnav a:hover {


opacity:1;


color:white;



text-shadow:

0 0 6px #00e5ff,

0 0 14px rgba(0,229,255,.5);



}



.topnav a.active {


color:#ff004c;


opacity:1;



text-shadow:

0 0 8px #ff004c;



}




/* =========================
   SPEAKERS
========================= */


.speaker {
position:absolute;
top:145px;
width:80px;
height:180px;
background:
repeating-linear-gradient(
to bottom,
#111,
#111 6px,
#222 6px,
#222 12px
);
border-radius:10px;
}

.speaker.left {
left:20px;
}

.speaker.right {
right:20px;
}

/* =========================
   SCREEN
========================= */

.screen-bezel {
margin-top:25px;
width:720px;
height:460px;
background:#0e0e0e;
padding:18px;
border-radius:25px;
box-shadow:
inset 0 0 0 10px #000,
inset 0 0 30px rgba(0,0,0,.9);
}

.screen {
width:100%;
height:100%;
position:relative;
overflow:hidden;
border-radius:12px;
background:#05070c;
}

/* CRT */

.screen::before {

content:"";

position:absolute;

inset:0;

background:

repeating-linear-gradient(

to bottom,

rgba(255,255,255,.04),

rgba(255,255,255,.04) 1px,

transparent 2px,

transparent 4px

);

}

/* =========================
   GAMES
========================= */

.game-slide {

display:none;

position:absolute;

inset:0;

justify-content:center;

align-items:center;

flex-direction:column;

}

.game-slide.active {

display:flex;

}

.game-slide img {

width:60%;

border-radius:12px;

}

.game-title {

margin-top:15px;

color:#00e5ff;

letter-spacing:3px;

}

/* =========================
   TEXT
========================= */

.insert-coin {

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

color:#00e5ff;

font-weight:bold;

letter-spacing:4px;

animation:blink 1s infinite;

}

.press-start {

display:none;

position:absolute;

bottom:10px;

left:50%;

transform:translateX(-50%);

letter-spacing:3px;

}

@keyframes blink {

50% {

opacity:0;

}

}

/* =========================
   CONTROLS
========================= */

.control-panel {

width:520px;

height:90px;

margin-top:20px;

background:#111;

border-radius:20px;

display:flex;

justify-content:space-around;

align-items:center;

}

.control-btn {

padding:10px 14px;

border:none;

border-radius:6px;

background:#333;

color:white;

font-weight:bold;

cursor:pointer;

box-shadow:

0 4px 0 #000;

}

.control-btn:active {

transform:translateY(2px);

}

.d-pad {

display:flex;

gap:10px;

}

/* =========================
   BASE
========================= */

.cabinet-base {

width:85%;

height:80px;

margin-top:auto;

background:

linear-gradient(#111,#000);

border-radius:

0 0 30px 30px;

}