html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0d0c16;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#game {
  width: min(100vw, calc(100vh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#mobile-hint {
  display: none;
}

@media (max-width: 768px) {
  #game {
    display: none;
  }
  #mobile-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100dvh;
  }
  #mobile-hint p {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.85rem, 4vw, 1.1rem);
    color: #e0e0e0;
    text-align: center;
    padding: 0 1.5rem;
    line-height: 1.6;
    max-width: 320px;
    overflow-wrap: break-word;
  }
  .cursor {
    display: inline-block;
    animation: blink 1s step-end infinite;
  }
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
  }
}