@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:#000;
  color:#fff;
  font-family:'Press Start 2P', cursive;
  overflow:hidden;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}




.arcade{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:16px;
}

.hud{
  display:flex;
  gap:34px;
  font-size:.62rem;
}
.hud-block{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.hud-label{ color:#fff; display:flex; align-items:center; gap:3px; }
.hud-value{ color:#fff; font-size:.72rem; }
.coin-icon{
  display:inline-block;
  width:8px; height:10px;
  background:#fbd000;
  border:1px solid #a86b00;
  border-radius:2px;
}

.screen{
  position:relative;
  border-radius:6px;
  box-shadow:0 0 0 3px #000;
  background:#5c94fc;
  line-height:0;
}

#board{ display:block; background:#5c94fc; image-rendering:pixelated; max-width:calc(100vw - 32px); max-height:calc(100dvh - 100px); width:auto; height:auto; }

.overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:rgba(0,0,0,.78);
  text-align:center;
  padding:20px;
}
.overlay.hidden{ display:none; }
.overlay.transparent{ background:rgba(92,148,252,.5); }

.logo-img{
  width:min(78%, 480px);
  image-rendering:pixelated;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
}

.ready-text{
  color:#fbd000;
  font-size:.7rem;
  letter-spacing:1px;
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:.35; } }

.big-text{
  font-size:.85rem;
  color:#fbd000;
  text-shadow:2px 2px 0 #000;
  letter-spacing:1px;
  line-height:1.7;
}

.score-text{
  font-size:.65rem;
  color:#fff;
}