body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
}

#app {
    width: 100%;
    height: 100vh;
    background-color: #111;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

input.game-input {
  /* layout */
  box-sizing: border-box;
  width: 100%;

  /* colours */
  background: #1a1a1a;
  color: #e0e0e0;                      /* slightly off-white for retro feel */
  border: 2px solid #555;             /* muted gray border */

  outline: none;                /* remove blue glow */
  padding: 6px;

  /* text */
  font-family: "Press Start 2P", monospace;
  /* font-family: 'monospace'; */
  font-size: 14px;
  line-height: 1.2;

  /* pixel perfect edges */
  image-rendering: pixelated;   /* keeps crisp borders on some browsers */
}

canvas:hover {
  cursor: ns-resize; /* or grab / default / pointer — your choice */
}

input.game-input:focus {
  border-color: #999999;        /* green highlight on focus (optional) */
}

input.game-input::placeholder {
  color: rgba(200, 200, 200, 0.4);   /* subtle, not pure white */

}