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

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

body {
  background: #0d1b2a;
  min-height: 100vh;
  font-family: 'Press Start 2P', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 32px;
  gap: 20px;
}

/* ── Header ── */
#header {
  max-width: 900px;
  width: 100%;
  text-align: center;
}

#header h1 {
  font-size: clamp(18px, 4vw, 30px);
  color: #7dd3f7;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(125,211,247,0.4);
  margin-bottom: 10px;
}

#header .tagline {
  font-size: clamp(6px, 1.5vw, 9px);
  color: #a0c8e0;
  line-height: 2.2;
  max-width: 700px;
  margin: 5em auto;
}

#header .tagline strong { color: #7dd3f7; }

/* ── Skin toggle ── */
#skinToggle {
  background: transparent;
  border: 2px solid #7dd3f7;
  color: #7dd3f7;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 7px 14px;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.15s, color 0.15s;
}
#skinToggle:hover { background: #7dd3f7; color: #0d1b2a; }

/* ── Game wrapper ── */
#gameWrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
}

canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 2px solid rgba(125,211,247,0.2);
}

/* ── Name modal ── */
#nameModal {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(10,20,30,0.88);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  z-index: 10;
}
#nameModal.visible { display: flex; }

#nameModal p {
  color: #7dd3f7;
  font-size: 9px;
  text-align: center;
  line-height: 2.2;
}

#nameInput {
  background: #0d1f2e;
  border: 2px solid #7dd3f7;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  padding: 10px 16px;
  text-align: center;
  outline: none;
  width: 220px;
  text-transform: uppercase;
}
#nameInput::placeholder { color: #3a5a7a; }

.modal-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

#submitName, #cancelName {
  border: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 10px 18px;
  cursor: pointer;
}
#submitName { background: #7dd3f7; color: #0d1b2a; }
#submitName:hover { background: #fff; }
#cancelName { background: #3a3a4a; color: #aaa; }
#cancelName:hover { background: #5a5a6a; color: #fff; }

footer{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #ffffff;
  max-width: 700px;
  margin: 3em auto 0;

  a:link, a:hover{
    color: #fff;
  }
  a:hover, a:active{
    text-decoration: none;
  }
}