/* Phone layout: the game screen sits above the controller instead of under it. */
@media (pointer: coarse) {
  html,
  body {
    height: 100%;
    background: #202850;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  #game {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
  }

  #game canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center top;
  }

  #controller {
    position: relative;
    flex: 0 0 auto;
    height: calc(210px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    opacity: 1;
  }

  .roundBtn {
    color: #3b1d0e;
    background: radial-gradient(ellipse at center, #f6cf62 0%, #d9a63a 100%);
  }

  .capsuleBtn {
    color: #f4ecd8;
    background: radial-gradient(ellipse at center, #7a5a43 0%, #5e4433 100%);
  }

  .btnPressed {
    opacity: 1;
    filter: brightness(0.75);
  }
}

/* The player's audio clock drives the emulator, and browsers only start audio
   after a real tap or key press. Until then the screen is blank, so say so. */
#start-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #e8dcc8;
  color: #3b1d0e;
  font:
    600 1.1rem / 1.4 system-ui,
    sans-serif;
  text-align: center;
  pointer-events: none;
}

#start-hint[hidden] {
  display: none;
}