html,
body {
  margin: 0;
  height: 100%;
  background: #5b4a3b; /* the desk under the sketchbook */
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  display: block;
  background: #fbf7ea;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

#touch {
  --b: 46px; /* button size */
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
#touch[hidden] {
  display: none;
}
#touch .pad {
  pointer-events: auto;
}
/* Up, left, right and down in a cross. */
#touch .dpad {
  display: grid;
  grid-template-columns: repeat(3, var(--b));
  grid-template-rows: repeat(3, var(--b));
  gap: 4px;
}
#touch .dpad .u {
  grid-column: 2;
  grid-row: 1;
}
#touch .dpad .l {
  grid-column: 1;
  grid-row: 2;
}
#touch .dpad .r {
  grid-column: 3;
  grid-row: 2;
}
#touch .dpad .d {
  grid-column: 2;
  grid-row: 3;
}
/* Right hand: SHRINK and CLIMB above, B and JUMP below. */
#touch .acts {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px 12px;
  align-items: end;
  justify-items: center;
}
#touch .acts button[hidden] {
  display: none;
}
/* The two abilities sit to the right of the other buttons. */
#touch .acts [data-act='ability1'] {
  grid-column: 3;
  grid-row: 1;
}
#touch .acts [data-act='ability2'] {
  grid-column: 3;
  grid-row: 2;
}
#touch .acts [data-act='ctrl'],
#touch .acts [data-act='throw'] {
  grid-column: 1;
}
#touch .acts [data-act='climb'],
#touch .acts [data-act='space'] {
  grid-column: 2;
}
/* Ink Flood only needs moving and jumping; Be the Eraser only moving. */
#touch.no-jump [data-act='space'],
#touch.jump-only [data-act='ctrl'],
#touch.jump-only [data-act='climb'],
#touch.jump-only [data-act='throw'] {
  display: none;
}
#touch button {
  width: var(--b);
  height: var(--b);
  border-radius: 50%;
  border: 2px solid rgba(56, 56, 61, 0.7);
  background: rgba(251, 247, 234, 0.4);
  color: #38383d;
  font: 22px 'Patrick Hand', 'Comic Sans MS', cursive;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#touch button.big {
  width: calc(var(--b) * 1.6);
  height: calc(var(--b) * 1.6);
}
#touch button.word {
  width: calc(var(--b) * 1.25);
  height: calc(var(--b) * 1.25);
  font-size: 14px;
}
/* Two Players: a set of arrows at each side, red for 1 and blue for 2. */
#touch2 {
  --b: 46px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
#touch2[hidden] {
  display: none;
}
#touch2 .pad {
  pointer-events: auto;
}
#touch2 .dpad {
  display: grid;
  grid-template-columns: repeat(3, var(--b));
  grid-template-rows: repeat(3, var(--b));
  gap: 4px;
}
#touch2 .dpad .u {
  grid-column: 2;
  grid-row: 1;
}
#touch2 .dpad .l {
  grid-column: 1;
  grid-row: 2;
}
#touch2 .dpad .r {
  grid-column: 3;
  grid-row: 2;
}
#touch2 .dpad .d {
  grid-column: 2;
  grid-row: 3;
}
#touch2 button {
  width: var(--b);
  height: var(--b);
  border-radius: 50%;
  border: 2px solid rgba(56, 56, 61, 0.7);
  background: rgba(251, 247, 234, 0.4);
  color: #38383d;
  font: 22px 'Patrick Hand', 'Comic Sans MS', cursive;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#touch2 .p1 button {
  border-color: #c8402f;
  color: #c8402f;
}
#touch2 .p2 button {
  border-color: #2a6fd6;
  color: #2a6fd6;
}
#touch2 button.on {
  background: rgba(241, 191, 44, 0.75);
}
#touch2 button.pause {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: calc(8px + env(safe-area-inset-left, 0px));
  width: 44px;
  height: 44px;
  font-size: 18px;
  pointer-events: auto;
}
/* Settings: left-handed puts the arrows on the right and JUMP on the far
   left; see-through makes the buttons fainter. */
#touch.lefty {
  flex-direction: row-reverse;
}
#touch.lefty .acts {
  direction: rtl;
}
#touch.faint button {
  opacity: 0.45;
}
#touch button.on {
  background: rgba(241, 191, 44, 0.75);
}
/* Pause: a small button in the top left corner, just under the info bar
   (main.js sets --pause-top) so the page's name shows. */
#touch button.pause {
  position: fixed;
  top: calc(var(--pause-top, 8px) + env(safe-area-inset-top, 0px));
  left: calc(8px + env(safe-area-inset-left, 0px));
  width: 44px;
  height: 44px;
  font-size: 18px;
  pointer-events: auto;
}
/* A phone held upright: the stage is turned a quarter turn (main.js sets
   its size and turn), so the game runs on its side and fills the screen. */
body.rotated #stage {
  right: auto;
  bottom: auto;
  transform-origin: top left;
}