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

html,
body {
  height: 100%;
  background: #0b0c14;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#game-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #1a1c2c;
}

/* ---- touch controls (coarse pointers only) ---- */
#touch {
  display: none;
}

@media (pointer: coarse) {
  #touch {
    display: block;
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  .tbtn {
    pointer-events: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font: bold 18px sans-serif;
    width: 48px;
    height: 48px;
  }

  .tbtn.active {
    background: rgba(255, 255, 255, 0.35);
  }

  #dpad {
    position: absolute;
    left: 14px;
    bottom: 20px;
    width: 156px;
    height: 156px;
    pointer-events: none;
  }

  #dpad .tbtn {
    width: 52px;
    height: 52px;
  }

  #t-up { left: 52px; top: 0; }
  #t-left { left: 0; top: 52px; }
  #t-right { left: 104px; top: 52px; }
  #t-down { left: 52px; top: 104px; }

  #actions {
    position: absolute;
    right: 14px;
    bottom: 40px;
    width: 140px;
    height: 120px;
    pointer-events: none;
  }

  .tbtn.round {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 22px;
  }

  #actions [data-btn='a'] {
    right: 0;
    bottom: 60px;
    position: absolute;
  }

  #actions [data-btn='b'] {
    right: 70px;
    bottom: 0;
    position: absolute;
  }

  #t-start {
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    width: 84px;
    height: 32px;
    font-size: 13px;
    border-radius: 16px;
  }
}