/* Pixel-perfect Emerald Box recreation.
   The original is a fixed 400x400 window. We render at the original
   resolution and display the canvas at exactly 1:1 (400 CSS px) with no
   upscaling, so every byte of the output matches the native exe. On a
   HiDPI display the browser may draw each CSS px as multiple device px
   but `image-rendering: pixelated` keeps every pixel a sharp square. */

:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #c8c8d8;
  --accent: #6a6adf;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 system-ui, "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 100vh;
}

/* The canvas is the whole UI. It is displayed at its intrinsic
   resolution (400x400 CSS px) — no upscaling — so the image is a
   byte-for-byte match with the native exe's window. */
#stage {
  width: 400px;
  height: 400px;
  image-rendering: pixelated;          /* WebKit/Chromium/Firefox */
  image-rendering: crisp-edges;        /* fallback */
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

#hint {
  margin: 0;
  opacity: 0.7;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 520px;
  padding: 0 16px;
  line-height: 1.6;
  transition: opacity 400ms ease;
}
#hint a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 50%, transparent);
}
#hint a:hover { text-decoration: none; border-bottom-style: solid; }
/* Fade the copy after a click but keep the links pointer-interactive so
   they don't suddenly go inert. Visual fade only. */
#hint.hidden { opacity: 0.25; }