/* The horse designer owns the whole window. Almost all of its chrome is drawn
   on a canvas by js/gui.js, because the point is to look like the custom horse
   spawn egg rather than like a web page - so there is very little CSS here, and
   what there is exists to get out of the way. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b1120;
  color: #e8eef8;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The `hidden` attribute only carries display:none from the UA stylesheet, and
   any author `display:` rule beats it. .boot sets one, so without this the boot
   overlay would never go away. */
[hidden] { display: none !important; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

/* the world */
#field { position: absolute; inset: 0; background: #8fc3f0; }
#field canvas { display: block; width: 100%; height: 100%; }

/* the GUI, over it */
#gui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The canvas never takes input. gui.js listens on the window in the capture
     phase and consumes only what lands on GUI furniture, so a drag on the empty
     middle reaches the field and spins the horse. */
  pointer-events: none;
}

.back {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 20;
  color: #7fc0ff;
  font-size: 0.78rem;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
}
.back:hover { text-decoration: underline; }

/* ---- boot overlay ---- */

.boot {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: #0b1120;
}
.boot-inner { text-align: center; max-width: 460px; padding: 20px; }
.boot h1 { font-size: 1.1rem; margin: 0 0 10px; letter-spacing: 0.02em; }
.boot p { margin: 4px 0; color: #93a3bd; font-size: 0.85rem; }
.boot .sub { color: #6b7c96; font-size: 0.78rem; margin-top: 12px; }