/* =====================================================================
   GAME PAGE — layout for index.html only.
   The look of the frame lives in components.css (.frame) and its
   values in tokens/tokens.json.
   ===================================================================== */

html,body{
  height:100%;
  overflow:hidden;
}

/* ---------- STRUCTURE (leave as is) ----------
   Keeps the game centered, scaled correctly, and the overlays
   positioned inside the frame. */
#app{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--page-bg);
}

#stage-wrap{
  aspect-ratio:960 / 540;   /* must match the canvas's 960x540 */
}

#game{
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
}

/* ---------- start screen character preview ---------- */
#preview{
  margin:26px 0;
  width:100px;
  height:140px;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 18px color-mix(in srgb, var(--amethyst) 60%, transparent));
}

#pauseOverlay .controls{ margin-top:24px; }

/* ---------- HUD placement over the canvas ---------- */
#hud{
  position:absolute;
  top:10px;
  left:12px;
  right:12px;
  pointer-events:none;
  z-index:4;
}

/* ---------- link to the design system ---------- */
.site-link{
  position:absolute;
  bottom:14px;
  right:18px;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--mist);
  text-decoration:none;
  opacity:0.6;
}
.site-link:hover,
.site-link:focus-visible{ opacity:1; color:var(--cyan); }