* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #0e1013;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Long-hand offsets and flex centring on purpose. `inset` needs Safari 14.1
   and `place-items` needs a grid implementation younger than some of the iPads
   this is played on; both fail silently, which leaves the picture in a corner
   of a box the size of nothing. Flex has worked since iOS 7. */
#frame {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#screen {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  background: #1a1c26;
  box-shadow: 0 0 0 2px #2b2f3d, 0 18px 60px rgba(0,0,0,.7);
}

#boot {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,12,16,.92);
  cursor: pointer;
  z-index: 5;
}
#boot.hidden { display: none; }

.boot-inner { text-align: center; font-family: ui-monospace, Menlo, monospace; }
.boot-title {
  font-size: 42px;
  letter-spacing: 6px;
  color: #ffd9a0;
  text-shadow: 0 3px 0 #b06a3c, 0 0 24px rgba(255,190,120,.35);
}
.boot-sub {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 3px;
  color: #7f8aa3;
  animation: blink 1.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* Only ever seen when the game failed to start — see the guard in index.html. */
.boot-err {
  margin: 18px auto 0;
  max-width: 22em;
  font-size: 12px;
  line-height: 1.5;
  color: #ff9a8c;
  word-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Touch controls
   -------------------------------------------------------------------------- */

#touch {
  position: fixed;
  top: auto; right: 0; bottom: 0; left: 0;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 4;
  pointer-events: none;
  /* Plain values first, then the notch-aware ones. CSS max() is Safari 13.1;
     an older browser drops the second declaration and keeps the first, which
     is the whole point of writing it twice. */
  padding: 0 10px 12px;
  padding: 0 max(10px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom))
           max(10px, env(safe-area-inset-right));
}
body.has-touch #touch { display: flex; }

#touch .dpad { position: relative; pointer-events: auto; }
/* Margins rather than `gap`: flexbox gap is Safari 14.1, and without it the
   buttons sit on top of one another on an older iPad. */
#touch .abtns { display: flex; flex-direction: column-reverse; align-items: center; pointer-events: auto; }
#touch .abtns > * + * { margin-bottom: 10px; }

.tb {
  background: rgba(45,50,68,.78);
  color: #cfd8ea;
  border: 2px solid rgba(140,156,190,.5);
  border-radius: 12px;
  font-size: 20px;
  touch-action: none;
  backdrop-filter: blur(2px);
}
.tb:active,
/* Set by the d-pad while the thumb is over an arrow. The browser only marks
   the element a press landed on, and on this pad the press moves. */
.tb.on { background: rgba(105,116,152,.95); transform: scale(0.96); }

/* A compact cross: left and right sit close in so the pad is narrow. */
.dpad { width: var(--pad); height: var(--pad); --btn: 46px; --pad: 128px; }
.tb.up, .tb.down, .tb.left, .tb.right { position: absolute; width: var(--btn); height: var(--btn); }
.tb.up { left: 41px; top: 0; }
.tb.down { left: 41px; top: 82px; }
.tb.left { left: 0; top: 41px; }
.tb.right { left: 82px; top: 41px; }

/* Run toggle, tucked into the empty middle of the cross where the thumb
   already is. Deliberately smaller than the gap so it's hard to catch by
   accident while sliding between arrows. */
.tb.run {
  position: absolute;
  left: 45px; top: 45px;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 9px;
  letter-spacing: 0.5px;
  font-family: ui-monospace, Menlo, monospace;
  background: rgba(32,36,52,.7);
  border-color: rgba(140,156,190,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb.run.on {
  background: rgba(255,207,107,.9);
  border-color: #fff0c4;
  color: #2a2438;
  font-weight: bold;
}

/* Action buttons stack vertically: ACT lowest and largest, MENU on top. */
.tb.act, .tb.back, .tb.menu {
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 0.5px;
  font-family: ui-monospace, Menlo, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb.act { width: 74px; height: 74px; color: #ffd9a0; border-color: rgba(255,207,107,.6); font-size: 14px; }
.tb.back { width: 56px; height: 56px; }
.tb.menu { width: 50px; height: 50px; font-size: 10px; }

/* Portrait: the controls get their own band and the game is centred above it.
   `--band` is measured in JS, since the band's height depends on the buttons. */
/* Sit the game directly above the controls rather than floating it in the
   middle: the interactive half of the screen stays together. */
body.controls-band #frame { bottom: var(--band, 0px); align-items: center; justify-content: flex-end; padding-bottom: 6px; }
body.controls-band #touch {
  background: linear-gradient(to top, rgba(14,16,19,.94), rgba(14,16,19,0));
  padding-top: 10px;
  align-items: center;
}
/* A vertical column of three is tall; keep it trim so the game keeps the room. */
body.controls-band .tb.act { width: 66px; height: 66px; }
body.controls-band .tb.back { width: 50px; height: 50px; }
body.controls-band .tb.menu { width: 44px; height: 44px; font-size: 9px; }
body.controls-band .abtns > * + * { margin-bottom: 8px; }

/* Landscape: controls float over the game so the view keeps the full height. */
body.controls-overlay #touch { padding-bottom: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
body.controls-overlay .tb { background: rgba(45,50,68,.55); }
body.controls-overlay .dpad { --btn: 42px; --pad: 118px; }
body.controls-overlay .tb.up { left: 38px; top: 0; }
body.controls-overlay .tb.down { left: 38px; top: 76px; }
body.controls-overlay .tb.left { left: 0; top: 38px; }
body.controls-overlay .tb.right { left: 76px; top: 38px; }
body.controls-overlay .tb.run { left: 41px; top: 41px; width: 36px; height: 36px; }
body.controls-overlay .tb.act { width: 64px; height: 64px; }
body.controls-overlay .tb.back { width: 48px; height: 48px; }
body.controls-overlay .tb.menu { width: 44px; height: 44px; }

/* Fullscreen toggle, top-right, only where it can actually do something. */
#fsbtn {
  position: fixed;
  /* Both offsets in plain pixels first. Dropping these two on an old iPad
     leaves a fixed element with auto offsets, which puts the button wherever
     it happened to fall in the document instead of the corner. */
  top: 8px;
  right: 8px;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(45,50,68,.7);
  border: 2px solid rgba(140,156,190,.45);
  color: #cfd8ea;
  font-size: 18px;
  z-index: 6;
  touch-action: manipulation;
}
#fsbtn:active { background: rgba(105,116,152,.95); }

/* The keyboard hint under the picture. Quiet enough to ignore once you know. */
#keyhint {
  /* Pinned to the bottom of the window rather than laid out under the canvas:
     the canvas is sized from the window, so a line that took up room of its
     own would shrink the picture to make space for itself. */
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: #6b6382;
  letter-spacing: 0.3px;
}
#keyhint kbd {
  background: #2a2440;
  border: 1px solid #3d3557;
  border-radius: 4px;
  padding: 1px 6px;
  color: #a99fc0;
  font: inherit;
}
/* A phone has a MENU button on the glass and no Tab key to press. */
body.has-touch #keyhint { display: none; }

/* The display diagnostic. Deliberately plain and deliberately large: it is read
   off a screen that is misbehaving, often at arm's length. */
#diag {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(10,12,16,.96);
  color: #cfd8ea;
  z-index: 20;
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#diag[hidden] { display: none; }
#diagtext {
  font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  margin: 0 0 14px;
}
#diagclose {
  font: 14px/1 ui-monospace, Menlo, monospace;
  padding: 10px 18px;
  background: #2a2440;
  color: #cfd8ea;
  border: 1px solid #3d3557;
  border-radius: 6px;
}