/* Extracted from the original hedgehogger/index.html's inline <style> block — this app's own
   CSP (style-src 'self', no unsafe-inline, applied to every response except /umbraco) blocks an
   inline <style> tag the same way it blocks a style="" attribute, so this has to be its own
   same-origin stylesheet instead. No other change from the original game. */
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0d130e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Comic Sans MS", cursive, sans-serif;
  touch-action: none;
}
#canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The game renders to a fixed logical resolution (see engine.js) so the level
   layout is identical on every device; this just letterboxes/centers that
   fixed-size canvas within whatever viewport it's given. Two canvases share
   this same centered rect (#gameCanvas3d beneath, #gameCanvas on top) so
   Level 4's WebGL scene can sit directly under the ordinary 2D canvas, which
   keeps owning input/HUD/banners even once the 3D scene is showing through
   it — see engine.js's render3DFrame(). Absolute positioning takes both out
   of #canvas-container's flex flow entirely, so the flex centering above is
   unaffected. */
canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  touch-action: none;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
#gameCanvas3d {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
#gameCanvas {
  z-index: 2;
}

/* Back-to-app link — not part of the original game, added for this app's own easter egg
   integration. Fixed top-right (the in-canvas HUD now owns the top-left), small and
   unobtrusive so it doesn't compete with the game's own UI, above the canvas (canvas is a
   sibling, not a child, of this) via z-index. */
.back-to-app {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: 0;
  z-index: 10;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0 0 0 8px;
}
.back-to-app:hover,
.back-to-app:focus-visible {
  color: rgba(255, 255, 255, 0.9);
}

/* Map link — returns to the level-select hub from mid-level. Bottom-left,
   deliberately clear of the in-canvas HUD strip (top) and the back-to-app
   link (top-right). Shown/hidden by main.js depending on whether a level
   is currently active. */
.back-to-map {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
  left: 0;
  z-index: 10;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0 8px 0 0;
}
.back-to-map:hover,
.back-to-map:focus-visible {
  color: rgba(255, 255, 255, 0.9);
}
.back-to-map[hidden] {
  display: none;
}