body {
  font-family: arial;
  font-size: 16px;
  box-sizing: border-box;
  padding: 1em;
  margin: auto;
}
#current-action[data-visible="1"] {
  display: flex;
}
#current-action {
  height: 5rem;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  text-align: center;
  background: #DEF;
  border: 1px solid #AEF;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
#current-action.invert {
  transform: scale(-100%, 100%);
}
.direction-pad {
  display: none;
  width: 100%;
  margin: 0 auto 100px auto;
  grid-template: repeat(3, 5rem) / repeat(3, 1fr);
}
.direction-pad.enable {
  display:grid;
}

button {
  font-size: 3rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  border: 1px solid #C9F;
  background: #CCF;
}
button.active {
  background: #CAF;
}
button[value="ff"] {
  grid-column: 2/3;
}
button[value="sf"] {
  grid-row: 2/3;
  grid-column: 1/2;
}
button[value="ss"] {
  grid-row: 2/3;
  grid-column: 2/3;
}
button[value="fs"] {
  grid-row: 2/3;
  grid-column: 3/4;
}
button[value="bf"] {
  grid-row: 3/4;
  grid-column: 1/2;
  background-color: #EEE;
  border-width: 0 0 1px 1px;
  border-color: #DDD;
}
button[value="bb"] {
  grid-row: 3/4;
  grid-column: 2/3; 
}
button[value="fb"] {
  grid-row: 3/4;
  grid-column: 3/4;
  background-color: #EEE;
  border-width: 0 1px 1px 0;
  border-color: #CCC;
  transform: scaleX(-100%);
}
button[value="bf"].active,
button[value="fb"].active {
  background-color: #CCC;
}
#enable-debug {
  text-align: center;
}
#enable-debug a {
  text-decoration: none;
  color: #333;
  display: inline-block;
  border: 1px solid #CCC;
  background: #ddd;
  padding: 1em 2em;
}
#enable-debug a:hover {
  background: #CCC;
}

.settings {margin-bottom: 50px; display: none; grid-template: auto / 30vw auto; grid-gap: 20px;}
.settings.enable { display: grid; }
.settings input, .settings button, .settings select {padding: 1em 0.5em;}
.settings h1, .settings h2, .settings button {grid-column: 1/3;}