html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #101018;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
}

#wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

#screen {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  border: 6px solid #00d8d8;
}

#help {
  margin: 0;
  color: #9ad;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: center;
  max-width: 760px;
}

#help b {
  color: #ffd800;
}

/* ------------------------------------- playing with fingers or the pointer
   The screen controls are there on every machine, so this class is set on
   every machine; `?touch=0` is the one way to be left without them. */

body.touch {
  height: 100%;
  overflow: hidden;                 /* nothing to scroll away from the game */
  touch-action: none;               /* and nothing to zoom with a stray pinch */
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body.touch #wrap {
  padding: 4px;
  gap: 6px;
}

body.touch #help {
  font-size: 12px;
  max-width: 92vw;
}

/* The game screen with a column of controls at each end. On its side the
   columns are the stage's own children, so each takes an end; upright the box
   holds them in a row under the screen, one at each end of that. */
#stage {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

#controls {
  display: contents;
}

/* a column: left or right at the top, then the middle, then the foot */
.side {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  flex: none;
  width: 104px;
}

#sideA { order: -1; }
#sideB { order:  1; }

#fire, .way {
  box-sizing: border-box;           /* the border is part of the 104, as a button's is */
  width: 104px;
  height: 104px;
  padding: 0;
  border: 4px solid #00d8d8;
  background: rgba(0, 216, 216, 0.12);
  color: #ffd800;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

#fire { border-radius: 50%; }
.way  { border-radius: 14px; }

/* the row each one stands in, whichever column it has been dealt to */
#left, #right { grid-row: 1; }
#fire, #up    { grid-row: 2; }
#down         { grid-row: 3; }

#fire svg { width: 62px; height: 62px; display: block; margin: 0 auto; }
.way svg  { width: 66px; height: 66px; display: block; margin: 0 auto; }
.way svg path { fill: rgba(0, 216, 216, 0.55); }

#fire.down, .way.down {
  background: rgba(255, 216, 0, 0.35);
  border-color: #ffd800;
}
.way.down svg path { fill: #ffd800; }

/* upright: the screen on top, the two columns in a row under it */
@media (orientation: portrait) {
  #stage {
    flex-direction: column;
    align-items: stretch;
  }
  #controls {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }
  .side { height: 344px; }          /* three buttons and the gaps between them */
}